*{box-sizing:border-box;font-family:Josefin Sans,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal}body,h1,h2,h3{margin:0;padding:0}.page{height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:75px 1fr;background-color:#000;color:#fff}.page__content{min-height:0}@keyframes spin{to{transform:rotate(360deg)}}.loader{max-width:50px;max-height:50px;display:flex;place-self:center;animation:1s infinite linear spin;aspect-ratio:1/1;height:100%;opacity:1}.loader--bgBlack{background-color:#000}.loader--primary{color:#000}.loader--transparent{opacity:.5}.page__loader{inset:0;z-index:1;background-color:#fff;position:absolute;opacity:.8;display:flex;justify-content:center;align-items:center}.button{padding:5;transition:all .3s;aspect-ratio:3/1;background-color:#000;color:#fff;display:flex;justify-content:center;align-items:center;outline:1px solid #ffffff;border-radius:3px}.button:hover{color:#000;background-color:#fff}.button--square{height:100%;aspect-ratio:1/1}.header{position:sticky;top:0;right:0;left:0;background-color:#000;z-index:1;display:flex;justify-content:space-between;padding:10px;align-items:center;border-bottom:1px solid #ffffff}.header__logo{display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;height:100%}.icon{transition:all .2s;position:relative}.icon--small{width:16px;height:16px}.icon--big{width:30px;height:30px}.icon--rotated{rotate:90deg}.button:hover>*{scale:1.2}.logo{height:100%}.rooms{min-height:0;overflow-y:auto;height:100%;display:flex;flex-direction:column;row-gap:10px;padding:5px}.rooms__panel{width:fit-content;background-color:#000;color:#fff;padding:5px;display:flex;align-self:center;border:1px solid #ffffff;border-radius:5px}.rooms__createButton{width:fit-content;aspect-ratio:1/1}.room{position:relative;padding:5px;border:1px solid #ffffff;border-radius:5px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.room__buttonContainer{display:flex;column-gap:3px}.room__button{width:fit-content;aspect-ratio:1/1}.room__input{height:100%}.room--active{background-color:gray}.chat{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;row-gap:20px;height:100%;min-height:0}.chat__inputContainer{position:sticky;display:flex;width:100%;height:50px;bottom:0}.chat__input{border-radius:5px;width:100%;font-size:20px}.chat__button{aspect-ratio:1/1}.chat__data{border-radius:5px;border:1px solid #ffffff;padding:10px;height:min-content;display:flex;align-items:center}.messages{height:100%;min-height:0px;overflow-y:auto;display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;row-gap:10px;padding:20px;justify-items:right}.message{width:100%;height:100%;display:flex;flex-direction:column;row-gap:5px;width:fit-content;padding:10px;background-color:#fff;border-radius:15px;font-size:20px}.message__createdAt{align-self:flex-end}.message--createdByOthers{color:#e46060;justify-self:left}.message__text{color:#000}.message--createdByUser{color:#071864;justify-self:right}.loginContainer{display:flex;justify-content:center;align-items:center;align-content:center;flex-direction:column;row-gap:15px}.login{position:relative;display:flex;justify-content:space-between;flex-direction:column;align-items:center;width:40vw;aspect-ratio:1.8/1;padding:15px;border-radius:5px;border:1px solid #ffffff}.login__button{font-size:20px;height:50px;width:200px;align-self:flex-end}.input{display:flex;align-items:center;flex-direction:column;justify-content:center;row-gap:10px;aspect-ratio:3/1;width:20vw;position:relative;width:100%}.input__title{font-size:30px}.input__place{width:100%;border-radius:5px;aspect-ratio:8/1;font-size:20px}.input__error{position:absolute;bottom:10px;left:0;font-size:10px;color:red}.chatsContainer{display:grid;grid-template-columns:1fr 3fr;grid-template-rows:1fr;height:100%}