:root{--header-height: 5rem;--chat-header-height: 5rem;--form-height: 2.5rem;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;color:#fdfaf7;background-color:#242424;box-sizing:border-box;width:100%;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:1rem;background-color:#242424}::-webkit-scrollbar-track{box-shadow:0 0 1px 1px #ffffff1a inset;border-radius:.25rem}::-webkit-scrollbar-thumb{background-color:#ffffff1a;border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background-color:#ffffff26}:focus:not(:focus-visible){outline:0;box-shadow:none}body{margin:0 auto;padding:0;height:100vh;height:100dvh}#root{display:flex;flex-flow:column wrap}.container{display:flex;flex-flow:row wrap;justify-content:center;position:relative;width:100%}h1{font-size:3.2em;line-height:1.1}a{font-weight:500;color:#29a3a3;text-decoration:inherit}a:hover{color:#52e0e0}p{margin:0;margin-bottom:.5rem;padding:0}input{color:#fffc;font-size:.875rem;height:1.25rem;border-radius:1rem;border:none;padding:.25rem 1rem;margin:0;background-color:#1a1a1a;box-shadow:0 0 3px #ffffff4d}input:focus-visible{box-shadow:0 0 2px 2px #ffffff4d}button{color:#fffc;align-self:center;justify-self:center;border-radius:.5rem;border:1px solid transparent;padding:.5em 1.25em;font-size:1rem;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#52e0e0}button:disabled{border-color:transparent;pointer-events:none}button:focus,button:focus-visible{outline:2px auto -webkit-focus-ring-color}button img{display:flex;align-items:center}@media screen and (max-width: 800px){:root{--chat-header-height: 4rem}.container .user-profile-card{display:none}.container .user-profile-card.show{display:flex;flex-flow:column wrap;position:fixed;top:var(--header-height);left:0;width:100%;height:100dvh;background-color:#242424;z-index:1}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-track{box-shadow:none}}.loginform{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center}.loginform h3{align-items:flex-start;font-size:2.5rem}#login-register-form{display:flex;flex-flow:column;width:min(20rem,80vw)}.loginform input{flex:0;margin-bottom:1rem}.loginform label{font-size:.8rem;margin-bottom:.5rem}.button-container{display:flex;align-items:center;gap:1rem;margin-top:2rem}@media screen and (max-width: 800px){.loginform h3{font-size:2rem;margin-top:1rem}}.profile{display:flex;flex-flow:column nowrap;align-content:center}.profile h2{font-size:2rem;text-align:center;margin-bottom:0}.profile-card{display:flex;flex-flow:column wrap;align-self:center;align-items:center;width:min(25rem,90vw)}.profile-card h3{font-size:1.6rem}.profile-card p{padding:0;margin:.3rem 0px}.profile-card input[type=file]{display:none}.upload-pic{position:relative;bottom:4rem;left:4.5rem;display:flex;justify-content:center;align-items:center;cursor:pointer;height:2.5rem;width:2.5rem;border-radius:50%;box-shadow:0 0 6px 3px #fff3 inset;transition:all .4s ease-in-out}.upload-pic:hover{box-shadow:0 0 1rem 1rem #fffc inset;color:#1a1a1a;scale:1.1}.upload-pic p{font-size:1.4rem;font-weight:500}.profile-pic{margin-bottom:2rem;border-radius:50%;box-shadow:0 0 6px 3px #fff3;overflow:hidden}.profile-pic img{display:block;width:200px;height:200px;object-fit:cover}.profile-card form{display:flex;flex-flow:column wrap;width:100%;padding:0;margin:0}.profile-card form p{display:flex;gap:.5rem;margin-bottom:.75rem;width:100%}.profile-card form p>span{width:25%}.profile-card input{width:65%}.profile-card select{width:10rem;height:2rem;border:none;border-radius:1rem;padding:0 1rem;color:#fffc;background-color:#1a1a1a;box-shadow:0 0 3px #ffffff4d}.profile button{margin:1rem}@media screen and (max-width: 800px){.profile h2{margin-top:.5rem;margin-left:0}}:root{--def-padding: 1.5rem;--multiplier: 1}.chat-sidebar{height:calc(100dvh - var(--header-height));width:min(20rem,20vw);text-align:center;transition:opacity .3s ease-in-out,transform .5s ease-in-out;z-index:5}.sidebar-list{height:100%;background:#1a1a1a;background:linear-gradient(180deg,#1a1a1a 75%,#1a1a1a80);border-right:2px solid #242424;overflow:hidden}.sidebar-close{display:none;pointer-events:none}.sidebar-list h3{display:flex;justify-content:center;align-items:center;margin:0;padding:0;height:var(--chat-header-height);font-size:2rem;font-weight:600}.sidebar-list ul{list-style-type:none;width:100%;margin:0;padding:0}.sidebar-list li{margin:0;padding:.25rem;padding-left:var(--def-padding);font-weight:500;text-align:left;border-width:1px 0px 1px 0px;border-style:solid;border-color:transparent;transition:.25s}.sidebar-list li:hover{border-color:#52e0e0;scale:1.04;padding-left:calc(var(--def-padding)*2.5);cursor:pointer}.active{background-color:#35665e}.unread{animation:newmessage 2s infinite}@keyframes newmessage{0%{color:#fff}50%{color:#0ff;padding-left:calc(var(--def-padding)*var(--multiplier)*2.5)}to{color:#fff}}@media screen and (max-width: 1100px){.sidebar-list h3{font-size:1.3rem;font-weight:500}}@media screen and (max-width: 800px){:root{--multiplier: 1.2}.chat-sidebar{display:flex;position:absolute;top:0;left:0;width:100%;height:calc(100dvh - var(--header-height))}.sidebar-list{width:70%}.sidebar-list h3{font-size:1.5rem;font-weight:600}.sidebar-list li{padding:.5rem;padding-left:calc(var(--def-padding)*var(--multiplier))}.sidebar-list li:hover{padding-left:calc(var(--def-padding)*var(--multiplier)*2.5)}.sidebar-hidden{transform:translate(-100%);opacity:0;pointer-events:none}.sidebar-close{flex:1;z-index:20;display:block;pointer-events:all;width:auto;height:100%;opacity:.6;background-color:#0000004d;cursor:pointer}}.emojis{position:absolute;bottom:2.5rem;right:5rem;height:24rem;max-width:90vw;border-radius:1rem;padding:0}.emojis .categories{display:flex;margin:0;padding:0;list-style-type:none}.categories li{padding:.25rem .675rem;border:1px solid transparent;cursor:pointer;margin-right:1px;border-top-left-radius:1rem;border-top-right-radius:1rem;font-size:1rem;background-color:#305050}li.selected{background-color:#1d3030}.categories li:last-child{background-color:#b9002e;margin-left:auto}.emoji-tab{display:flex;flex-flow:row wrap;align-content:flex-start;min-width:min(11rem,60%);max-width:34rem;height:calc(100% - 2.5rem);padding:0 .675rem;gap:.25rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;background-color:#1d3030;overflow:hidden auto}.emoji-tab span{font-size:1.5rem;border:1px solid transparent;cursor:pointer}.emoji-tab span:hover{border:1px solid springgreen;border-radius:.5rem}::-webkit-scrollbar{background-color:#1d3030}.sticker-icon{height:1.75rem;width:1.75rem}.sticker-list-item{height:3rem;width:3rem;border-radius:1rem;object-fit:cover;background-color:transparent;cursor:pointer}@media screen and (max-width: 1000px){.emojis{right:2%;height:300px;max-width:97vw}.categories li{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:.9rem}}.input-form{display:flex;position:relative;bottom:2px;height:var(--form-height);padding:0 .25rem;gap:.25rem;align-items:center}.input-form input{flex:1 1 auto;height:80%;width:20%;font-size:1rem;margin:0;border:none;padding:0 1rem;background-color:#1a1a1a}.input-form input:focus{outline:none}.input-form button[type=submit]{padding:.375rem 1.5rem;border-radius:1rem}.emoji-button{background-color:transparent;padding:0;font-size:1.5rem;border:none;box-shadow:none}@property --from-percent{syntax: "<percentage>"; initial-value: 25%; inherits: false;}@property --to-percent{syntax: "<percentage>"; initial-value: 100%; inherits: false;}.chat-wrapper{flex:1;display:flex;position:relative;flex-flow:column nowrap;height:calc(100dvh - var(--header-height))}.no-chat{position:relative;align-self:center;text-align:center;top:40%;font-size:4rem;opacity:.2}.chat-header{display:flex;justify-content:center;align-items:center;height:var(--chat-header-height);gap:1rem;padding:0;margin:0;background:#1a1a1a;background:linear-gradient(90deg,rgba(26,26,26,1) var(--from-percent),rgba(5,48,44,1) var(--to-percent));-webkit-transition:--from-percent .5s ease-in-out,--to-percent .5s ease-in-out;-moz-transition:--from-percent .5s ease-in-out,--to-percent .5s ease-in-out;-o-transition:--from-percent .5s ease-in-out,--to-percent .5s ease-in-out;transition:--from-percent .5s ease-in-out,--to-percent .5s ease-in-out}.chat-header:hover{--from-percent: 0%;--to-percent: 80%}.header-title{flex:12;display:flex;gap:1rem;justify-content:center;align-items:center}.header-title h3{font-size:2rem;margin:.5rem 0;pointer-events:none}.header-title img{width:2rem;height:2rem;border-radius:50%;object-fit:cover}.close-button{flex:.5;display:flex;justify-content:center;align-items:center;height:100%;padding:0;min-width:4rem;margin:0;border-radius:0;border-top:0;border-right:0;font-weight:100;font-size:1.5rem}.message-panel{display:flex;flex-flow:column-reverse nowrap;height:calc(100dvh - var(--header-height) - var(--form-height) - var(--chat-header-height));overflow:hidden auto;scroll-behavior:smooth}.message-panel .message{display:flex;flex-flow:column nowrap;justify-content:right;align-items:flex-end;gap:.25rem;padding:0 1rem}.message .message-content{display:flex;justify-content:right;gap:.5rem;align-items:center;max-width:75%}.message .message-content span{min-width:max-content;background-color:#7832c8;border-radius:1rem .25rem 1rem 1rem;padding:.25rem 1rem;box-shadow:2px 2px 3px #965fd4 inset,-2px -2px 3px #5d348d inset;word-break:break-all}.message:not(.last){padding-bottom:1px}.message:not(.last) .message-content span{border-radius:1rem .25rem .25rem 1rem}.message.me .message-content span{background-color:#aa08aa;box-shadow:2px 2px 3px #b943b9 inset,-2px -2px 3px #722072 inset}.message.others{justify-content:right;margin-right:auto}.message.others.last .message-content span{border-radius:.25rem 1rem 1rem}.message.others:not(.last) .message-content span{border-radius:.25rem 1rem 1rem .25rem;margin-left:2.25rem}.message .sent-at{font-size:.75rem;color:#aaa}.head-icon{border-radius:50%;width:1.75rem;height:1.75rem}.sticker{height:8rem;width:8rem;border-radius:1rem;object-fit:cover;background-color:transparent}.message-content span:has(.sticker){background-color:transparent!important;box-shadow:none!important}@media screen and (max-width: 800px){.no-chat{font-size:2rem}.header-title{cursor:pointer;pointer-events:all;justify-content:left;margin-left:1rem}.message-panel .message{padding-right:.5rem}}.user-profile-card{display:flex;flex-flow:column wrap;background:#1a1a1a;background:linear-gradient(180deg,#1a1a1a 75%,#1a1a1a80);border-left:2px solid #242424}.user-profile-card .user-profile-header{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;background-color:#1a1a1a}.user-profile-header h3{text-align:center;font-size:2rem;font-weight:700;margin:1.5rem}.user-profile{display:flex;flex-flow:column;align-items:center;width:min(30rem,30vw)}.user-profile h3{text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5rem;font-size:2.5rem;font-weight:400;margin:1rem}.user-profile-pic{display:flex;justify-content:center;align-items:center;width:10rem;height:10rem;border-radius:50%;margin:1rem}.user-profile-pic img{width:10rem;height:10rem;border-radius:50%;object-fit:cover;z-index:1}.glow-effect{width:10rem;height:10rem;position:absolute;border-radius:50%;border:.25rem solid transparent;background-image:conic-gradient(#ff0080,#7800da,#0059ff,#ff0080);animation:glow-rotate 4s linear infinite;animation-fill-mode:forwards;filter:blur(.5rem);transition:filter .5s ease-in-out}.user-profile-pic img:hover~.glow-effect{filter:blur(1.5rem);border:1.5rem solid transparent}.user-profile-header button{height:3rem;width:3rem;border-radius:50%;border:.25rem solid transparent;background-color:#1a1a1a;color:#fff;font-size:2rem;margin:.5rem;cursor:pointer}.user-profile-data{margin:1rem;text-align:center}@keyframes glow-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 800px){.user-profile-card{background:none}.user-profile-header{height:4rem;margin:0;padding:0;background:#1a1a1a;background:linear-gradient(90deg,#1a1a1a 25%,#05302c)}.user-profile-header button{height:100%;width:4rem;border-radius:0;border-top:0;border-right:4px solid transparent;padding:0;margin:0;font-weight:100;font-size:1.5rem}.user-profile-header h3{text-align:left;flex:1;margin:0 .5rem}.user-profile{width:auto;background-color:#242424}}.header{display:flex;flex-shrink:0;height:var(--header-height);width:100%;justify-content:space-between;align-items:center;background-color:#1a1a1a;box-shadow:0 0 5px 1px #fff3;z-index:10;overflow:hidden}.header h2{font-size:2rem;margin:1rem;padding-bottom:.25rem}.header button{margin:.5rem}.logo-title{display:inline flex;align-items:center}#logo-button:focus{outline:none;box-shadow:none}#logo-button:hover{border-color:transparent}.logo-title img{height:2rem;width:auto}.profile-icon{border-radius:50%;width:2rem;height:2rem;transition:.25s}@media screen and (max-width: 800px){.header{flex-flow:row nowrap}.header h2{font-size:1.3rem;margin:0}.logo-title img{height:2rem;width:2rem}.header button{margin:.5rem;padding:.25rem}.profile-icon{height:2rem;width:2rem}.header-unread{animation:hasunreadmsg 1.5s infinite}}@keyframes hasunreadmsg{0%{rotate:0deg}15%{rotate:8deg}30%{rotate:-8deg}45%{rotate:4deg;border-color:#52e0e0}60%{rotate:-3deg}to{rotate:0deg;border-color:transparent}}