@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";*{color:#cad3f5;font-family:Nunito}body{margin:0;background-color:#0f1018}.main{display:flex;justify-content:space-around;align-items:center;flex-direction:column;height:100vh}.navbar{background-color:#14151f;display:flex;justify-content:space-between;align-items:center;margin:1rem;border-radius:1rem;border:solid #8087a270;box-shadow:0 0 1px #8087a270;transition-duration:.2s;width:94vw;max-width:85rem;margin-top:10px}.navbar:hover{box-shadow:0 0 9px #8087a270}.navbarButton{display:flex;justify-content:center;align-items:center;background-color:#303344;padding:.7rem;border-radius:1rem;transition-duration:.3s}.resetButton{margin-left:2rem}.profileButton{margin-right:2rem;position:relative}.profilePopup{position:absolute;top:100%;right:0;margin-top:.5rem;z-index:1000}.profilePopupContent{background-color:#1b1d2a;border:solid #8087a270;border-radius:1rem;padding:1rem;min-width:150px;box-shadow:0 4px 15px #0000004d}.profileUsername{color:#cad3f5;font-size:.9rem;margin-bottom:.75rem;text-align:center;padding:.5rem;background-color:#303344;border-radius:.5rem}.logoutButton{background-color:#494d64;border:none;border-radius:.5rem;color:#cad3f5;font-size:.9rem;padding:.5rem 1rem;width:100%;transition-duration:.3s}.logoutButton:hover{background-color:#363a4f}.logoutButton:active{background-color:#292c3c}.clickable{cursor:pointer}.navbarButton:hover{background-color:#363a4f}.chatbox{background-color:#14151f;display:flex;justify-content:space-between;align-items:center;margin:1rem;border-radius:1rem;border:solid #8087a270;box-shadow:0 0 1px #8087a270;transition-duration:.2s;width:94vw;height:89.88px;max-width:85rem;margin-bottom:10px}.chatbox:hover{box-shadow:0 0 9px #8087a270;cursor:text}.chatInput{margin-left:1rem;border:none;background:#14151f;width:71vw;height:5rem;font-size:1rem;font-family:Nunito;max-width:79rem}.chatInput:focus{outline:none}.chatInput::placeholder{color:#cad3f5;font-family:Nunito;font-size:1rem}.sendButton{margin-right:1rem;padding:1rem;background:#303344;border-radius:1rem;transition-duration:.3s;display:flex;align-items:center;justify-content:center}.sendButton:hover{background:#363a4f}.buttonIcon{height:30px}.messageContainer{width:94vw;display:flex;flex-direction:column;height:71vh;background-color:#1b1d2a;border-radius:1rem;max-width:85rem;overflow:auto}.messageContainer-spacer{flex-grow:1}.messageContainer::-webkit-scrollbar-thumb{height:56px;border-radius:8px;border:4px solid transparent;background-clip:content-box;background-color:#363a4f}.messageContainer::-webkit-scrollbar{width:12px}.messageContainer::-webkit-scrollbar-track{border-radius:8px}.chatBubbleLeft p{animation-name:showup;animation-duration:.5s;margin-left:2rem;background-color:#a7affa;max-width:24rem;width:fit-content;border-radius:1rem;padding:1rem;color:#24273a;border-bottom-left-radius:4px}.chatBubbleRight{display:flex;justify-content:flex-end}.chatBubbleRight p{animation-name:showup;animation-duration:.5s;margin-right:2rem;background-color:#97b0e9;max-width:24rem;width:fit-content;border-radius:1rem;border-bottom-right-radius:4px;padding:1rem;color:#24273a}@keyframes showup{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{50%{fill:transparent}}.dot{animation:1s blink infinite;fill:#232634}.dot:nth-child(2){animation-delay:.25s}.dot:nth-child(3){animation-delay:.5s}.loader{background-color:#a7affa;color:#232634}.login-root{display:flex;justify-content:center;align-items:center;height:100vh}.loginBox{background-color:#171923;display:flex;justify-content:center;align-items:center;border-radius:1rem;border:solid #8087a270;box-shadow:0 0 1px #8087a270;transition-duration:.2s;width:25rem;height:40rem;flex-direction:column}.loginBox:hover{box-shadow:0 0 9px #8087a270}.loginForm{display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;width:100%;height:20rem}.inputField input{border:none;background:#373a50;border-radius:1rem;height:2.5rem;width:20rem}.inputField input:focus{outline:none}.inputField{border:none;background:#373a50;border-radius:1rem;height:2.5rem;width:20rem;padding:.5rem}.loginBox button{background:#494d64;border-radius:1rem;height:3.5rem;width:15rem;border:none;color:#cad3f5;font-size:1.2rem;transition-duration:.3s;margin-bottom:-1rem}.loginBox button:hover{background:#363a4f}.loginBox button:active{background:#292c3c}.loadingAnim{scale:.8}.toast{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%);background:#dc9292;color:#fff;border-radius:.5rem;padding:1rem;animation-name:showup2;animation-duration:4.3s}@keyframes showup2{0%{opacity:0;transform:translate(-50%,-90%)}50%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%)}}.toast-message{color:#000}@media (max-width: 600px){.chatBubbleLeft p,.chatBubbleRight p{max-width:12rem}.loginBox{width:22rem}.inputField,.inputField input{width:18.9rem}}