*{
box-sizing:border-box;
}

body{

margin:0;
height:100vh;
overflow:hidden;

font-family:"Ubuntu",sans-serif;
font-weight:700;
color:white;

background-image:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url("https://mobs.ashish.top/dirt1.svg");

background-size:300px;
}

/* AUTH */

#authOverlay{

position:fixed;
width:100%;
height:100%;

display:flex;
justify-content:center;
align-items:center;

background:rgba(0,0,0,0.85);

z-index:1000;
}

.authBox{

background:#2e2e2e;

padding:30px;

border-radius:14px;

border:3px solid #242424;

width:320px;

text-align:center;
}

.authBox input{

width:100%;

padding:12px;

margin-top:10px;

border-radius:10px;

border:3px solid #1c1c1c;

background:#1c1c1c;

color:white;
}

.authBox button{

margin-top:10px;

width:100%;

padding:12px;

border-radius:10px;

border:3px solid #9b5e1f;

background:#c77a2a;

color:white;

cursor:pointer;
}

/* HEADER */

.topbar{

height:70px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 25px;

background:#3a2b1f;

border-bottom:3px solid #2a1e14;
}

.title h1{

margin:0;
font-size:24px;
}

#online{

color:#7dff7d;
font-size:14px;
}

/* BUTTONS */

.buttons{

display:flex;
gap:10px;
}

button{

border-radius:10px;
border:3px solid #9b5e1f;

background:#c77a2a;

color:white;

cursor:pointer;

padding:8px 14px;
}

.discordBtn{

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

background:#5865F2;

border:3px solid #404eed;
}

.discordBtn img{

width:24px;
height:24px;
}

/* MAIN */

.mainPanel{

display:flex;

gap:20px;

height:calc(100vh - 70px);

padding:20px;
}

/* CHAT */

.chatPanel{

flex:2;

display:flex;
flex-direction:column;

background:#2e2e2e;

border-radius:14px;

border:3px solid #242424;
}

.chatPanel h2{

margin:12px;
}

/* MESSAGES */

#messages{

flex:1;

overflow-y:auto;

padding:14px;

font-size:16px;
}

/* CUSTOM SCROLLBAR */

#messages::-webkit-scrollbar{
width:12px;
}

#messages::-webkit-scrollbar-track{
background:#2a2a2a;
border-radius:10px;
}

#messages::-webkit-scrollbar-thumb{
background:#c77a2a;
border-radius:10px;
border:3px solid #2a2a2a;
}

/* MESSAGE */

.message{
margin-bottom:6px;
}

.name{
color:#ffd49e;
}

/* SEND BAR */

.sendBar{

display:flex;

border-top:3px solid #242424;
}

#msgInput{

flex:1;

padding:12px;

border:none;

background:#1e1e1e;

color:white;

border-radius:0 0 0 10px;
}

#sendBtn{

width:100px;

border-radius:0 0 10px 0;
}

/* SIDE PANEL */

.sidePanel{

flex:1;

background:#2e2e2e;

border-radius:14px;

border:3px solid #242424;

padding:12px;
}

.card{

background:#3a3a3a;

padding:12px;

border-radius:10px;

border:3px solid #2a2a2a;

margin-bottom:10px;
}

/* MOBILE */

@media (max-width:800px){

.mainPanel{

flex-direction:column;
}

}