@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;width:100vw;overflow-x:hidden;background:#0e0e0e;font-family:Poppins,sans-serif}a{text-decoration:none}p,span{padding:0;margin:0}.App{min-height:100vh;width:100vw;background:#0e0e0e;display:grid;place-content:center;background-image:url(/assets/starry-fdf499d6.gif)}#neon-fill{background:#c4fc37;color:#000}#neon-out{color:#c4fc37;border:#c4fc37}#lilac-fill{background:#cd2ccd;color:#fff}#lilac-out{color:#cd2ccd;border:#cd2ccd}.chat-wrapper{position:relative;width:100vw;height:100vh;display:flex;justify-content:space-evenly;align-items:center}.chat-wrapper .sidemenu{min-height:100vh;width:20vw;background:#161d22}.chat-wrapper .sidemenu h1{font-size:2rem;color:#cd2ccd;text-align:center;margin:1rem}.chat-wrapper .sidemenu .channel-users-container{height:10rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.8rem}.chat-wrapper .sidemenu .channel-users-container .chat-name{font-size:1.2rem;color:#fff;cursor:pointer;position:relative;text-align:left}.chat-wrapper .sidemenu .channel-users-container #online-icon{height:5px;width:5px;border-radius:50%;display:inline-block;background:#1ebd1e;margin:.2rem .5rem}.chat-wrapper .sidemenu #users-list{min-height:fit-content;max-height:12rem;overflow-y:scroll}.chat-wrapper .sidemenu #users-list::-webkit-scrollbar-thumb{background:#cd2ccd}.chat-wrapper .sidemenu #users-list::-webkit-scrollbar{height:1rem;width:.3rem}.chat-wrapper .sidemenu #users-list::-webkit-scrollbar-track{background:#161d22}.chat-wrapper .sidemenu #users-list{scrollbar-face-color:#cd2ccd;scrollbar-track-color:#161d22}.chat-wrapper .sidemenu .logout-btn{display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.8rem 4rem;font-size:1rem;color:#fff;background:#cd2ccd;border:none;border-radius:1.5rem;outline:none;margin:1rem 0;cursor:pointer}.chat-wrapper .sidemenu .logout-btn:hover{transform:scale(.95);opacity:.8}.chat-wrapper .information{min-height:100vh;width:20vw;background:#161d22;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;padding:.8rem}.chat-wrapper .information h3{color:#cd2ccd;font-size:1.2rem;margin:.8rem auto;text-align:center}.chat-wrapper .information ul{width:100%;padding:1rem;list-style:outside}.chat-wrapper .information ul li{font-size:1rem;color:#fff}.chat-wrapper .chat-window{width:clamp(30rem,60vw,45rem);min-height:100vh;background:#161d22;display:grid;place-content:center}.chat-wrapper .chat-window button{margin:1rem}.chat-wrapper .creds-modal{width:30rem;height:fit-content;padding:1rem;background:linear-gradient(40deg,#862f86,#e959a1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.chat-wrapper .creds-modal form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.chat-wrapper .creds-modal form button{background:#fff;color:#000;margin:1rem}.chat-wrapper .creds-modal h1{font-size:2rem;color:#fff}.chatbox{width:inherit;height:100vh;background:#161d22}.chatbox .header{height:5rem;width:100%;background:#0e0e0e;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:#1ebd1e}.chatbox .header span{margin:0 1rem;color:#c4fc37}.chatbox .header i{font-size:1.8rem;margin:0 1rem;color:#c4fc37;cursor:pointer}.chatbox .main{height:70%;border:2px solid #161d22;display:flex;flex-direction:column;overflow-y:scroll;padding:.8rem;background:linear-gradient(#0e0e0e,#161d22)}.chatbox .main .no-content{height:100%;display:grid;place-content:center}.chatbox .main .no-content img{height:17rem;width:17rem;filter:drop-shadow(0 4px 10px #71a9c1)}.chatbox .main::-webkit-scrollbar-thumb{background:#cd2ccd}.chatbox .main::-webkit-scrollbar{height:1rem;width:.3rem}.chatbox .main::-webkit-scrollbar-track{background:#161d22}.chatbox .main{scrollbar-face-color:#cd2ccd;scrollbar-track-color:#161d22}.chatbox .main .chat-message{min-height:fit-content;width:100%;margin:1rem 0;display:flex;justify-content:left;align-items:center}.chatbox .main .chat-message p{font-size:1rem;color:#fff;background:#cd2ccd;padding:.6rem;margin:0;width:fit-content;border-radius:0 1rem 1rem 0}.chatbox .main .chat-message .chat-meta{font-size:.77rem;color:#fff;margin:.4rem 0;display:block}.chatbox .main #self-msg{justify-content:right}.chatbox .main #self-msg p{border-radius:1rem 0 0 1rem;background:#2a8b8d}.chatbox .main #system-msg{justify-content:center}.chatbox .main #system-msg p{border-radius:.9rem;font-size:.7rem;background:#161d22;box-shadow:0 0 0 1px #1e1d1d}.chatbox .footer{height:fit-content;padding:.8rem 1rem;margin-top:.8rem;border-top:2px solid #0e0e0e;position:relative}.chatbox .footer .send-message-wrap{height:4rem;display:flex;justify-content:center;align-items:center;gap:1rem}.chatbox .footer .send-message-wrap textarea{min-height:3rem;max-height:5rem;background:transparent;color:#fff;border:none;border-radius:.5rem;box-shadow:0 0 3px 2px #cd2ccd;width:90%;padding:.5rem;font-size:1rem;font-family:Poppins,sans-serif;resize:vertical}.chatbox .footer .send-message-wrap textarea:focus{outline:none}.chatbox .footer .send-message-wrap .send-btn,.chatbox .footer .send-message-wrap .emoji-btn{height:3rem;margin:0;width:10%;display:grid;place-content:center;font-size:2.2rem;background:transparent;color:#cd2ccd;border-radius:.5rem;border:none;cursor:pointer;box-shadow:0 0 3px 2px #cd2ccd}@keyframes float{to{transform:translateY(10px)}}.auth-wrapper{display:flex;justify-content:center;align-items:center;gap:1rem}.auth-wrapper img{width:25rem;animation:float 2s infinite alternate}.auth-wrapper h1,.auth-wrapper h2{font-size:3rem;color:#cd2ccd;margin:1rem auto}.auth-wrapper h2{font-size:1.6rem}.auth-wrapper input{width:20rem;height:4rem;border:none;background:transparent;outline:none;border-bottom:1px solid #c4fc37;font-size:1.1rem;color:#fff}.auth-wrapper input::placeholder{color:#fff}.auth-wrapper button{border:none;border-radius:1rem;font-size:1.5rem;background:transparent;color:#c4fc37;height:4rem;padding:0 1rem;cursor:pointer}.auth-wrapper button:hover{background:#161d22;transform:scale(1.1);transition:all .1s ease}
