:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",EmojiOne Color,"Android Emoji",Segoe UI Symbol,Noto Sans Symbols,EmojiSymbols;letter-spacing:1px;line-height:1.4;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--text-color-light: #213547;--background-color-light-only: whitesmoke;--text-color-dark: rgba(218, 218, 218, .87);--background-color-dark: #292a2d}*{box-sizing:border-box}.btn-theme{margin-top:-50px;margin-right:-2px;font-size:24px;border:none;background:none;cursor:pointer}::placeholder{font-size:.9em}#app{height:100vh}body{background-color:var(--background-color-light);font-size:24px;margin:0}.dark-mode body{color:var(--text-color-dark);background-color:var(--background-color-dark)}button,input{border:2px solid rgb(160,159,159)}.btn-connect{display:none}.btn-login{margin-top:30px;border-radius:40%;padding:4px 12px}.btn-send{display:none}.btn-clear{padding:6px;border-radius:40%}.btn-logout{margin-top:50px;border-radius:40%;padding:6px}#chatbox{height:200px;text-align:center;width:360px;margin:auto;overflow-y:scroll;padding:6px 0 0 10px;border:3px solid rgb(171,171,171);border-radius:14px;font-size:1rem}#chatbox p{text-align:left}.chat-input{margin:0;padding:0 1em}#chat{height:80vh;display:flex;flex-direction:column;align-items:center;text-align:center}.cue-row{display:flex;justify-content:center;margin-top:10px}.cue-button{font-size:22px;padding:4px 0;margin:0 5px;cursor:pointer;border-radius:50%;width:64px;border:1px solid rgb(160,159,159)}.cue-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px}.cue-call,.cue-howzit,.cue-dakine,.cue-shoots,.cue-help{font-size:1.4em}.cue-call{color:#66bb6a}.cue-howzit{color:#ff7043}.cue-dakine{color:#5c6bc0}.cue-help{color:#dc143c}.cue-shoots{color:#ffa726}#cue-display{margin-bottom:8px;font-size:40px}.cue-list{display:flex;flex-direction:column}.cue-list p{margin:5px 0}.logo{margin-top:6px;display:flex;align-items:center}.logo .emoji{margin-top:-16px;font-size:46px;margin-right:8px}.url{margin-top:12px;font-size:.7em;font-weight:700;color:#989797;font-style:italic}.header-container{display:flex;justify-content:space-between;align-items:center;padding:18px}.items-left{display:flex;align-items:center}.status-container{display:flex;align-items:center;font-size:1.2rem;margin-top:4px}.connected{background-color:#00a400}.disconnected{background-color:gray}input{border-radius:14px;font-weight:700;letter-spacing:1px;border:none;padding:6px 8px 6px 14px;outline:none;clip-path:ellipse(55% 70% at 50% 50%);border:2px solid rgb(171,171,171)}.input-field{padding:10px 0}.main{width:100%}#username{border-radius:7px;font-size:.9em}.instruction{font-size:.7em;font-weight:700;color:#989797;margin:auto}#login{height:40vh;margin-top:100px;display:flex;flex-direction:column;align-items:center;text-align:center}.login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}p{margin:.18em}.users{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}.users p{font-size:1rem;margin:0;padding:3px;font-weight:700}@media (max-width: 480px){#app{height:100vh}input,button{font-size:20px;padding:4px}}