*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:#242424;color:#fff}.container{height:100vh;display:grid;place-items:center}.auth{background:#fff;color:#000;width:40vw;max-width:700px;height:70vh;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:50px}.auth button{display:flex;align-items:center;gap:10px;color:#fff;background:#1a1a1a;padding:8px 20px;border-radius:8px;cursor:pointer}.auth button:hover{background:#383838}@media (max-width: 700px){.auth{width:90vw}}.auth img{width:30px}h1{font-size:50px}button{background:#1a1a1a;color:#fff;padding:8px 20px;border-radius:8px;cursor:pointer;border:none;outline:none;font-size:16px;text-align:center;font-weight:500}button:hover{filter:brightness(60%)}.room-page{background:#fff;color:#1a1a1a;padding:50px 60px;border-radius:10px;display:flex;flex-direction:column;gap:40px;text-align:center}.room-page input{padding:5px 10px;font-size:20px;border:none;outline:none;box-shadow:2px 2px 10px #00000058;border-radius:8px}.room-page>button:last-child{background:#dc143c}.chat-page{background:url(/assets/bg-xEhjYzXr.jpeg);background-repeat:no-repeat;background-size:cover;height:80vh;width:50vw;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;max-width:800px;overflow:hidden}@media (max-width: 650px){.chat-page{width:100vw;height:100vh;border-radius:0}}.chat-page header{background:#1c743c;display:flex;justify-content:space-between;align-items:center;padding:15px}.chat-page header div{display:flex;gap:10px}.chat-page header div button{width:100px;height:min-content;background:#c6cac7;color:#1a1a1a}.chat-page header div .sign-out{background-color:#dc143c;color:#fff}.chat-page header .room{font-size:x-large;font-weight:700}.chat-page form{display:flex;gap:10px;padding:10px;background:#1c743c}.chat-page form .text-input{width:100%;border-radius:10px;border:none;padding:5px 10px;font-size:15px;box-shadow:2px 2px #00000091}.chat-page form .input-file-label{width:80px;display:flex;align-items:center;justify-content:center;font-size:x-large;padding:5px;border-radius:10px;cursor:pointer}.chat-page form .input-file-label:hover{background-color:#238346}.chat-page form .input-file{visibility:hidden;display:none}.chat-page form button{background:#c6cac7;color:#111}.chat-page main{flex:1;display:flex;flex-direction:column;overflow:auto;gap:10px;padding:10px}.chat-page main::-webkit-scrollbar{background:transparent;width:6px}.chat-page main::-webkit-scrollbar-thumb{background-color:#f99417}.msg-other{display:flex;align-items:center;gap:5px;color:#fff}.msg-other .user-info{display:flex;align-items:center;gap:5px}.msg-other .user-info img{width:40px;border-radius:50%}.msg-other .user-info span{font-weight:700}.msg-other .msg-text{background:#5f5d5d;padding:10px;border-radius:7px 7px 0;display:flex;flex-direction:column}.other-pic{border:none;width:150px}.msg-user{background:#1c743c;display:flex;flex-direction:column;justify-content:center;align-self:flex-end;padding:10px;border-radius:7px 7px 0;gap:5px}.auth-user-pic{width:150px}