body{background-color:#efefef;display:flex;justify-content:center}#user{padding:1rem;background-color:#fff;text-align:center}#title{color:purple}#room,#user.hidden{display:none}#room.active{border:2px solid #ccc;border-radius:1rem;width:90vw;height:90vh;display:flex}#users{background-color:#eee;border-radius:1rem 0 0 1rem;padding:.5rem 1rem;flex-basis:25%;list-style:none}#chat{position:relative;background-color:#fff;border-radius:0 1rem 1rem 0;flex-basis:75%}#input{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}#input input{width:100%;border-width:1px 0;border-radius:0;padding:1rem}#input button{border:none;border-radius:0 0 1rem;padding:1rem;background-color:purple;color:#fff}#messages{height:100%;overflow-y:scroll;padding:0 1rem}.message:last-child{margin-bottom:5rem}.message{background-color:#fafafa;border:1px solid #efefef;border-radius:.5rem;margin:1rem 0;padding:1rem}.message.server{background-color:#ff80001a;border-color:#ff800033}.user-nick{font-weight:700;color:purple;margin-bottom:.5rem;font-size:1.2rem}.user-nick.server{color:#ff8000}.user-msg{color:#333}.user-msg.server{font-style:italic}#users li{margin-bottom:.5rem;color:purple;font-weight:700}.nickname{color:purple;font-weight:700}