@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@100;400;500;700&family=Open+Sans:wght@300;400;500;600;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}:root{--clr-white:#fff;--clr-black:#202020;--clr-grey:#303136;--clr-light-grey:#363940;--clr-dark-grey:#212226;--clr-blue:#5865f2;--clr-green:#34ab55;--clr-text-grey:#66666e}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Open Sans;margin:0}nav{background-color:#000;border-bottom:2px solid #212226;border-bottom:2px solid var(--clr-dark-grey);display:grid;grid-template-columns:repeat(4,1fr);height:11vh}.nav__brand,nav{align-items:center}.nav__brand{display:flex;grid-column:1/span 3;padding:0 75px}.logos{margin-right:10px;width:30px}.nav__brand h1{font-family:Kanit;font-size:1.5em;font-weight:700;letter-spacing:-1px}.nav__brand h1,.nav__connect{color:#fff;color:var(--clr-white)}.nav__connect{background-color:#212226;background-color:var(--clr-dark-grey);border:none;border-radius:8px;cursor:pointer;font-family:Open Sans;font-size:1.1em;font-weight:600;height:50px;margin:0 75px 0 auto;transition:all .25s ease;width:175px}.nav__connect:hover{background-color:aqua;color:#000}main{background-color:#212226;background-color:var(--clr-dark-grey);display:grid;grid-template-columns:repeat(9,1fr);height:90vh}.servers{align-items:center;background:#cfcfcf;display:flex;flex-direction:column;grid-column:1/2;justify-content:flex-start}.channels{background-color:#fff;grid-column:2/4}.text{background-color:#363940;background-color:var(--clr-light-grey);display:grid;grid-column:4/13;grid-template-rows:repeat(12,1fr)}.server{align-items:center;background-color:#303136;background-color:var(--clr-grey);border-radius:50%;cursor:pointer;display:flex;height:60px;justify-content:center;margin:25px auto 0;transition:all .25s ease;width:60px}.server:hover{background-color:#00d5ff;color:#000}.server img{height:50%;width:50%}.channels__text,.channels__voice{margin:30px auto}.channels h2{color:#66666e;color:var(--clr-text-grey);font-size:.9em;font-weight:600;letter-spacing:-1px;margin:0 10px;padding:5px;text-transform:uppercase}.channels ul li{border-radius:4px;color:#000;cursor:pointer;font-size:1.1em;font-weight:600;list-style:none;margin:3px 10px;padding:5px 20px}.channels .active,.channels ul li:hover{background-color:#363940;background-color:var(--clr-light-grey);color:#fff;color:var(--clr-white)}.text .messages{align-self:flex-end;display:flex;flex-direction:column;grid-row:1/11;max-height:75vh;overflow-y:scroll;scroll-snap-align:end}.text .message{align-items:center;border-radius:6px;display:flex;justify-content:flex-start;margin:10px auto 0;padding:10px;width:95%}.text .message img,.text .message:hover{background-color:#303136;background-color:var(--clr-grey)}.text .message img{align-items:center;border-radius:50%;display:flex;height:50px;justify-content:center;padding:10px;width:50px}.message_content h3{font-weight:500}.message_content h3,.message_content p{color:#fff;color:var(--clr-white);font-size:1.05em;margin-left:15px}.message_content p{font-weight:300}.text form{align-items:center;display:flex;grid-row:11/13;justify-content:center}.text form input[type=text]{border:none;border-radius:6px 0 0 6px;color:#fff;color:var(--clr-white);font-family:Open Sans;grid-row:11/13;width:85%}.text form button,.text form input[type=text]{background-color:#303136;background-color:var(--clr-grey);height:40%;padding:10px}.text form button{border:none;border-radius:0 6px 6px 0;cursor:pointer;transition:all .25s ease;width:60px}.text form button:hover{background-color:#212226;background-color:var(--clr-dark-grey)}.text form img{height:25px;width:25px}@media screen and (max-width:992px){.servers{grid-column:1/3}.channels{grid-column:3/6}.text{grid-column:6/13}.text form{margin:0 auto;width:90%}}@media screen and (max-width:576px){.servers{grid-column:1/3}.server{height:45px;width:45px}.channels{grid-column:3/7}.channels h2{font-size:.85em}.channels ul li{font-size:1em}.text{grid-column:7/13}}
/*# sourceMappingURL=main.260de5f5.css.map*/