@import url("https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap&subset=latin-ext");
*{margin:0;padding:0;box-sizing:border-box}*:before,*:after{box-sizing:border-box}body{animation:fadeIn .5s ease;font-family:'Sawarabi Gothic',sans-serif;color:#222;background-color:#fafafa}input{outline:none;margin-top:8px;font-size:16px;padding:4px}.openchat-wrapper .openchat .logs .log .avatar,.users .user .avatar,.discord-invite-wrapper .icon{background-position:50%;background-size:100%;width:40px;height:40px;border-radius:50%}.main{display:grid;grid-gap:8px;grid-template-columns:100%;grid-template-rows:auto auto auto;grid-template-areas:"header     " "description" "openchat   " "users      ";align-items:center;justify-content:center}header{padding:8px;padding-bottom:0;grid-area:header;position:sticky;position:-webkit-sticky;top:0;background:rgba(64,69,78,0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f0f0f0;}header .links{display:flex;justify-content:space-space-around;padding-top:8px;font-size:16px;user-select:none;}header .links div{cursor:pointer;display:flex;justify-content:center;align-items:center;padding:8px;}header .links div:hover{transition:.4s;color:#222;background-color:rgba(255,255,255,0.5)}.description{grid-area:description;padding:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.openchat-wrapper{grid-area:openchat;padding:0 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;}.openchat-wrapper .openchat{width:100%;padding:8px;background:#3c4048;color:#fff;border-radius:4px;}.openchat-wrapper .openchat input{width:100%;border-radius:4px;border:0;background-color:rgba(90,94,102,0.8);color:#f0f0f0;}.openchat-wrapper .openchat input::placeholder{color:#909498}.openchat-wrapper .openchat hr{border:1px solid #fff;margin-bottom:8px}.openchat-wrapper .openchat .logs{height:300px;overflow-y:scroll;}.openchat-wrapper .openchat .logs::-webkit-scrollbar{width:10px;}.openchat-wrapper .openchat .logs::-webkit-scrollbar-track{background-color:#32363e;border-radius:50px}.openchat-wrapper .openchat .logs::-webkit-scrollbar-thumb{background-color:rgba(20,24,32,0.6);border-radius:50px}.openchat-wrapper .openchat .logs .log{display:grid;grid-template-rows:auto 1fr;grid-template-columns:64px calc(100% - 64px);grid-template-areas:"avatar name   " "avatar content";}.openchat-wrapper .openchat .logs .log:not(:first-child){padding-top:8px}.openchat-wrapper .openchat .logs .log .avatar{grid-area:avatar}.openchat-wrapper .openchat .logs .log .name{grid-area:name;}.openchat-wrapper .openchat .logs .log .name .time{padding-left:8px;color:rgba(255,255,255,0.3)}.openchat-wrapper .openchat .logs .log .content{grid-area:content;overflow-wrap:break-word}.users{grid-area:users;padding:0 8px;align-items:center;justify-content:center;}.users h1{user-select:none;cursor:pointer}.users .user{background:#40454e;color:#fff;border-radius:3px;align-items:center;display:grid;grid-gap:8px;grid-column-gap:8px;grid-template-columns:48px 240px;grid-template-areas:"avatar name " "roles  roles";margin-top:8px;padding:8px;}.users .user .avatar{grid-area:avatar}.users .user .name{grid-area:name}.discord-invite-wrapper{background:#40454e;border-color:#202630;border-radius:3px;padding:8px;align-items:center;}.discord-invite-wrapper .icon{height:50px;width:50px;border-radius:40%}.discord-invite-wrapper a{color:#fff;text-decoration:none;background:#5ac88c;border-radius:4px;margin-left:16px;padding:8px;transition:.1s;}.discord-invite-wrapper a:hover{background:#44c17d}.roles{grid-area:roles;display:flex;flex-direction:row;flex-wrap:wrap;}.roles .role{padding:8px;padding-left:16px;display:inline-block;background:#202630;vertical-align:middle;border-radius:25px 0 0 25px;line-height:16px;margin:4px;margin-left:0;}.roles .role::before{content:'●';font-size:12px;margin-top:-8px;margin-right:8px}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}