@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap";body{background-color:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;height:100vh;overflow-x:hidden}#root{display:flex;flex-direction:column;height:100vh}footer{display:flex;align-items:center;justify-content:flex-end;border-top:1px solid var(--primary-dark)}footer img{max-height:2rem;margin:var(--spacer) 1rem var(--spacer) var(--spacer)}.main-menu{position:absolute;top:0;right:0}#checkbox-toggle{display:none}.menu-title{display:block;color:transparent;height:4rem;width:4rem;padding:1rem;background:url(images/nav.svg) 1rem center no-repeat;background-size:2rem;font-size:0;opacity:.7;cursor:pointer}.menu-title:hover{opacity:1}.main-nav{position:absolute;right:0;width:100%;min-width:200px;text-align:right;background-color:var(--primary);z-index:1;transform:scaleY(0);transform-origin:top;transition:transform .2s ease-in-out}#checkbox-toggle:checked~.main-nav{transform:scaleY(1)}#checkbox-toggle:checked~.menu-title{background:url(images/close.svg) 1rem center no-repeat;background-size:2rem}.main-nav button{display:block;width:100%;padding:1rem;border:0;text-align:right;font-size:1rem;color:#fff;background-color:transparent;cursor:pointer}.main-nav button:hover{background-color:var(--primary-active)}header{position:relative;padding:1rem;background-color:var(--primary)}header h1{padding-right:4rem;color:var(--primary-text);font-size:clamp(1rem,3vw,1.4rem)}header h2{margin-left:1rem;color:var(--primary-text);font-size:clamp(1rem,3vw,1.2rem)}.unauthed h1{padding:0;font-size:clamp(1.4rem,5vw,2rem);text-align:center}.unauthed img{display:block;max-height:200px;margin:0 auto 1rem}.authed{display:flex;align-items:center;padding:0;min-height:4rem}.authed img{margin:1rem;max-height:2rem}@media screen and (min-width: 800px){header{display:flex;align-items:center;padding:0}header img{max-height:50px}.unauthed img{max-height:50px;margin:1rem}}main{height:100%}.channellist{min-width:300px;flex-shrink:0}.channellist h2{padding:1rem 2rem;font-size:1em;background-color:var(--secondary)}.channellist h2:first-of-type{border-top:0}.channellist ul{padding:var(--spacer) 0;background-color:var(--primary-text);border-top:1px solid var(--primary);border-bottom:1px solid var(--primary)}.channellist li{list-style:none}.channellist a{display:block;padding:var(--spacer);padding-left:3rem;text-decoration:none;color:var(--primary);background:url(images/group.svg) no-repeat 1rem center;background-size:1rem}.channellist a:hover{background-color:var(--negative-active)}@media screen and (min-width: 800px){main{display:flex;align-items:stretch;height:100%}.channellist{background-color:var(--secondary);border-right:1px solid var(--primary-dark)}.channellist ul{margin-left:1rem;border-left:1px solid var(--primary-dark)}}.profile-holder{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--negative)}.close{position:absolute;top:.5rem;display:block;height:3rem;width:2rem;margin-left:1rem;border:0;color:transparent;background:url(images/left.svg) center no-repeat transparent;background-size:2rem;opacity:.7;cursor:pointer;z-index:1}.close:hover{opacity:1}.profile-header{padding-left:2rem}.profile{padding:1rem}.profile-img{display:block;width:100%;min-height:266px;margin-bottom:1rem}.profile-title{font-size:20px;font-weight:700;margin-bottom:10px;text-align:left}.profile-subtitle{font-size:16px;font-weight:400;margin-bottom:10px;text-align:left}.profile-buttons{display:flex;justify-content:space-evenly;margin-top:1rem}.profile-button{padding:1rem 2rem;border:0;border-radius:var(--spacer);font-size:1.2rem;line-height:1.6rem;text-align:center;text-decoration:none;background-color:var(--primary);color:var(--primary-text)}.profile-button:hover{background-color:var(--primary-active)}@media screen and (min-width: 800px){.profile-header{display:none}.profile-holder{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent}.profile{position:absolute;width:100%;max-width:400px;margin-left:1rem;border:1px solid var(--primary-dark);background-color:var(--negative);box-shadow:0 2px 10px 1px #00000040}.close{position:fixed;top:0;left:0;height:100vh;width:100vw;border:0;font-size:0;color:transparent;background-color:transparent}}.chat{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 3rem - 1px)}.send{display:flex;flex-direction:row;margin:0 .5rem;font-size:1rem}.send-status{color:#777;font-size:.8rem;height:1.5rem;margin:.25rem .5rem 0}.send-input,.send-message{width:100%;padding:var(--spacer);font-family:inherit;border:1px solid black;border-radius:0}.send-button{padding:.5rem 1rem;border:0;font-weight:700;font-family:inherit;background-color:var(--primary);color:var(--primary-text);cursor:pointer}.send-button:hover{background-color:var(--primary-active)}.messages{height:100%;overflow-y:auto;padding:1rem}.message{position:relative;margin-bottom:1rem;padding-left:4rem;list-style:none}.message-thumbnail{position:absolute;left:0;display:block;width:3rem;height:3rem;background-color:var(--primary);cursor:pointer}.message-header{display:flex;justify-content:space-between}.message-button{display:contents}.sender{display:block;font-weight:700;cursor:pointer;border:0;font-family:inherit;background-color:transparent;font-size:1rem}.sender:hover{text-decoration:underline}.time{float:right;margin-left:1rem;font-size:.8rem;font-weight:400;color:var(--secondary)}.end-message{list-style:none;height:1px}.exit{display:none}.text{word-break:break-all}.members{display:block;font-weight:400;font-size:.8rem}@media screen and (max-width: 799px){.chat{position:absolute;top:0;height:calc(100vh - 3rem - 1px);background-color:var(--negative);transition:all .2s ease-in-out}.channel-view .chat{transform:translate(100%)}.chat-view .chat{transform:translate(0)}.exit{display:block;height:3rem;width:2rem;margin-left:1rem;border:0;color:transparent;background:url(images/left.svg) center no-repeat transparent;background-size:2rem;opacity:.7;cursor:pointer}.exit:hover{opacity:1}}.loginregister{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:var(--max-width-form);margin:0 auto;padding:0 1rem;flex-grow:1}.loginregister a,.loginregister button{width:100%;padding:1rem;border:0;border-radius:var(--spacer);font-size:1.2rem;line-height:1.6rem;text-align:center;text-decoration:none;background-color:var(--primary);color:var(--primary-text)}.loginregister a:hover,.loginregister button:hover{background-color:var(--primary-active)}.hr{display:flex;align-items:center;justify-content:space-between;width:100%;margin:1rem}.hr:before,.hr:after{content:"";display:block;height:2px;width:42%;background-color:var(--primary)}.loginregister-form{width:100%;margin:0 auto}.loginregister-title{display:none}.loginregister-label{display:block}.loginregister-label-text{display:none}.loginregister input{width:100%;margin-bottom:1rem;padding:var(--spacer);font-size:1.2rem;border:2px solid var(--primary);border-radius:4px}.login-register-button{margin-top:1rem}:root{--primary: #333;--primary-dark: #000;--primary-active: MidnightBlue;--primary-text: #fff;--secondary: #ccc;--negative: white;--negative-active: #eee;--max-width-form: 400px;--spacer: .5rem}.container{display:flex;flex-wrap:wrap}