:root{--padding:10px}body{background:hsl(var(--global-hue) var(--global-saturation) 11.8%);background-attachment:fixed}*{color:var(--text);font-family:var(--regular-font)}button,input{background:hsl(var(--global-hue) var(--global-saturation) 40%);border:none;border-radius:10px;transition:.2s ease-out;padding:10px}button:hover,input:hover{background:hsl(var(--global-hue) var(--global-saturation) 50%);filter:drop-shadow(0 0 5px hsl(var(--global-hue) var(--global-saturation) 50%))}input::placeholder{color:var(--text-dark)}button{cursor:pointer}#chats-wrap,#message-form,#messages,#users-wrap{background:hsl(var(--global-hue) var(--global-saturation) 20%);position:fixed;--top-padding:calc(var(--header-height) + var(--padding));top:var(--top-padding);border-radius:10px;box-sizing:border-box}#chats-wrap{left:var(--padding);height:calc(100vh - var(--padding) - var(--top-padding));width:250px}#chats{display:flex;flex-direction:column;gap:10px;transition:.2s ease-out;width:100%;height:100%;overflow-y:scroll;padding:10px}#chats .chat{background:hsl(var(--global-hue) var(--global-saturation) 30%);box-sizing:border-box;padding:5px;width:calc(100% - 20px);height:60px;line-height:50px;border-radius:10px;transition:.2s ease-out;cursor:pointer;text-decoration:none;position:relative;color:var(--text)}#chats .chat:last-child{margin-bottom:150px}#chats-wrap .after-chats{position:absolute;bottom:0;left:0;padding:10px;width:100%;box-sizing:border-box;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px}#chats-wrap #create-chat-button,#chats-wrap #public-chat-form button,#chats-wrap #public-chat-form input{background:hsl(var(--global-hue) var(--global-saturation) 30%);border:none;border-radius:5px;box-sizing:border-box;padding:10px;transition:.2s ease-out}#chats-wrap #public-chat-form label{color:var(--text-dark);font-size:12px}#chats-wrap #public-chat-form input{width:calc(100% - 45px)}#chats-wrap #public-chat-form button{width:40px;height:40px;cursor:pointer}#chats-wrap #create-chat-button{cursor:pointer;margin-top:10px;width:100%}#chats .chat:hover,#chats-wrap #create-chat-button:hover,#chats-wrap #public-chat-form button:hover,#chats-wrap #public-chat-form input:hover{background:hsl(var(--global-hue) var(--global-saturation) 40%);filter:drop-shadow(0 0 5px hsl(var(--global-hue) var(--global-saturation) 40%))}#chats .chat.current{background:hsl(var(--global-hue) var(--global-saturation) 25%)!important;filter:none;cursor:default}#chats .chat.not-accepted{background:hsl(var(--global-hue) var(--global-saturation) 25%);filter:none;cursor:default}#chats .chat i{position:absolute;right:10px;top:5px;line-height:11px;color:var(--text-dark);font-size:9px}#chats .chat i.fa-solid{background:hsl(var(--global-hue) var(--global-saturation) 30%);cursor:pointer;width:30px;height:30px;line-height:30px;text-align:center;border-radius:10px;transition:.2s ease-out;top:20px}#chats .chat i.fa-solid:hover{background:hsl(var(--global-hue) var(--global-saturation) 40%);filter:drop-shadow(0 0 5px hsl(var(--global-hue) var(--global-saturation) 40%))}#chats .chat.not-accepted i:nth-child(2){right:50px}#chats .chat.not-accepted i:nth-child(3){right:10px}#users-wrap{right:var(--padding);height:calc(100vh - var(--padding) - var(--top-padding));width:250px;transition:.2s ease-out;padding:10px}#users{width:100%;height:calc(100% - 100px);display:flex;flex-direction:column;gap:10px}#users .user{background:hsl(var(--global-hue) var(--global-saturation) 25%);width:100%;height:60px;border-radius:10px;box-sizing:border-box;padding:10px;display:flex;align-items:center;position:relative}#users .user img{height:40px;width:40px;border-radius:10px;background:hsl(var(--global-hue) var(--global-saturation) 30%)}#users .user .username{margin-left:5px;color:var(--text);text-decoration:none}.kick-mode #users .user{animation:kickShake .2s infinite}@keyframes kickShake{0%{transform:unset}25%{transform:rotateZ(2deg)}75%{transform:rotateZ(-2deg)}100%{transform:unset}}#users .user.not-accepted::before{content:"Hasn't accepted invite";color:red;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:brightness(.6) blur(2px);border-radius:10px}#users .user.offline .username{filter:brightness(.7)}#users .user:has(.fa-crown){animation:none}#users .user .fa-crown{position:absolute;top:-11px;left:18.5px;font-size:20px;color:#ffdb39}#users-wrap #invite-button,#users-wrap #kick-button{background:hsl(var(--global-hue) var(--global-saturation) 30%);width:100%;border-radius:5px;padding:10px;margin-top:10px}.kick-mode #users-wrap #kick-button{filter:brightness(.8)}#users-wrap #invite-button:hover,#users-wrap #kick-button:hover{background:hsl(var(--global-hue) var(--global-saturation) 40%);box-shadow:0 0 5px hsl(var(--global-hue) var(--global-saturation) 40%)}#messages{left:calc(250px + var(--padding) * 2);width:calc(100vw - 500px - var(--padding) * 4);height:calc(100vh - 60px - var(--padding) * 2 - var(--top-padding));padding:10px;display:flex;gap:20px;flex-direction:column;overflow-y:scroll;transition:.2s ease-out}#messages #deathnote{color:var(--text-dark);width:100%;text-align:center}#messages .message{width:calc(100% - 20px);position:relative}#messages .message .pfp{width:30px;height:30px;border-radius:5px;background:hsl(var(--global-hue) var(--global-saturation) 30%);position:absolute;left:0;top:7px}#messages .message .username{position:absolute;top:0;left:40px;color:var(--text);text-decoration:none}#messages .message .time{color:var(--text-dark);margin-left:10px}#messages .message .contents{display:inline-block;margin-top:25px;margin-left:40px;text-wrap-mode:wrap;text-wrap-style:pretty;overflow-wrap:break-word;width:100%}#messages .message .contents img{background:hsl(var(--global-hue) var(--global-saturation) 30%);border-radius:10px;max-width:90%;max-height:90%}#message-form{top:unset;left:calc(250px + var(--padding) * 2);bottom:var(--padding);height:60px;width:calc(100vw - 500px - var(--padding) * 4);padding:5px;transition:.2s ease-out}#message-form input{width:100%;height:100%;background:#0000;border:none;outline:0;padding:unset}#topright-buttons{position:fixed;top:80px;right:calc(var(--padding) * 2 + 260px);z-index:5;transition:.2s ease-out}#topright-buttons button{background:hsl(var(--global-hue) var(--global-saturation) 25%);width:40px;height:40px;border:none;border-radius:5px;transition:.2s ease-out;margin-left:10px}#topright-buttons button:hover{background:hsl(var(--global-hue) var(--global-saturation) 30%);filter:drop-shadow(0 0 5px hsl(var(--global-hue) var(--global-saturation) 30%))}.users-hidden #users-wrap{right:-100%}.users-hidden #topright-buttons{right:calc(var(--padding) + 10px)}.users-hidden #message-form,.users-hidden #messages{width:calc(100vw - 250px - var(--padding) * 3)}#pop-up-wrap{position:fixed;top:0;left:0;width:100vw;height:100vh;justify-content:center;align-items:center;transition:.2s ease-out;display:flex;z-index:-999}.pop-up-visible #pop-up-wrap{backdrop-filter:blur(10px) brightness(80%);-webkit-backdrop-filter:blur(10px) brightness(50%);z-index:99999999}#pop-up{display:flex;flex-direction:column;background:hsl(var(--global-hue) var(--global-saturation) 30%);min-width:500px;min-height:300px;box-sizing:border-box;padding:20px;border-radius:10px;transform:scale(0);transition:.2s ease-out}.pop-up-visible #pop-up{transform:scale(100%)}#pop-up .title{margin-top:5px}#pop-up input{margin-left:10px}#pop-up button{display:block;margin-top:20px}