body{
    background-color: rgba(0, 0, 0, 0.808);
    margin: 0;
    color: white;
    font-family: Roboto, sans-serif, system-ui, Arial;
}

navbar{
    background-color: #090a12;
}

a{
	color: #5b69ea;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}


#mainwrapper{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.mainmainwrapper{
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

iframe{
    max-width: 100dvw;
}

.mainmainwrapper > iframe{
    width: 98%;
}

#mainmainwrapper > iframe{
    width: 98%;
}


#mainmainwrapper{
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

#mainwindow{
    max-width: 100vw;
    width: 800px;
    background-color: #090a12;
    border-radius: 15px;
}

#addimgwindow{
	    max-width: 100vw;
    width: 800px;
    background-color: #090a12;
    border-radius: 15px;
	padding: 20px;
}

.fembtn{
    background-color: rgb(235, 141, 157);
    border: 2px solid rgb(206, 109, 126);
    padding:5px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    border-radius: 3px;
    font-size: 1.2rem;
}

.malbtn{
    background-color: rgb(141, 147, 235);
    border: 2px solid rgb(109, 111, 206);
    padding:5px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    border-radius: 3px;
    font-size: 1.2rem;
}

.defaultwindow{
    max-width: 100vw;
width: 800px;
background-color: #090a12;
border-radius: 15px;
padding: 20px;
}

.somewindow{
    max-width: 100vw;
    width: 800px;
    background-color: #090a12;
    border-radius: 15px;
	padding: 20px;
}

#imageslist{
	width: 100%;
	height: 500px;
	max-height: 90dvh;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    flex-direction: row-reverse;
}

#imageslist > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	justify-items: center;
    width: 100px;
    height: 100px;
    margin: 5px;
    background-size: cover;
    background-position: center;
}

.displayimg{
    width: 300px;
    max-width: 100dvw;
}

.displayimg > img {
    width: 100%;
    filter: blur(15px) brightness(0.2);
}

.displayimg > video {
    width: 100%;
    filter: blur(15px) brightness(0.2);
}

.displayimg > button{
    width: 100%;
}

#chatwindow{
    width: 100%;
    height: calc(100dvh - 1.25rem);
    display: flex;
    flex-direction: column;
}

#messages{
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
}

#toolbar{
    width: 100%;
    display: flex;
}

#stop, #sendandimg{
    height: 5rem;
    width: 5rem;
    aspect-ratio: 1/1;

}

#sendandimg > button {
	width: 5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
}

#textbox{
    flex-grow: 1;
    resize: none;
}

input{
    background-color: #181a25;
    border: rgb(61, 61, 243) 2px solid;
    border-radius: 2px;
    color:snow;
}

.error{
    color: rgb(218, 32, 32);
    text-align: center;
}

button:disabled{
    opacity: 50%;
}

.messagecontent{
    white-space: pre-line;
}

.notyou{
    color:rgb(231, 31, 31);
}

.yesyou{
    color:rgb(46, 46, 214);
}

.message{
    margin:0px;
}

#reportcover{
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #090a12de;
    z-index: 10;
    justify-content: center;
    display: flex;
    justify-items: center;
    align-items: center;
}

.cover{
	    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #090a12de;
    z-index: 10;
    justify-content: center;
    display: flex;
    justify-items: center;
    align-items: center;
}

#reportwindow{
    width: 800px;
    max-width: 100vw;
    border-radius: 5px;
    padding: 10px;
}

#startbtn{
    background-color: rgb(29, 206, 29);
    color: #090a12;
    border-radius: 5px;
    padding: 10px;
    border: 3px solid rgb(12, 151, 12);
}

#stopbtn{
    background-color: rgb(206, 35, 29);
    color: #090a12;
    border-radius: 5px;
    padding: 10px;
    border: 3px solid rgb(151, 12, 12);
}