body,html{font-size:16px;height:100vh;font-family:Poppins,sans-serif;color:#444}body{background-color:#f7f7f7}h1,h2,h3,p{margin:0}p{line-height:1.4rem}ul a{color:#3498db}ul a:hover{color:#9b59b6}ul{list-style-type:circle}nav{position:-webkit-sticky;position:sticky;top:0;padding-top:10px;padding-bottom:10px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;background-color:rgba(52,73,94,.9);color:#eee;z-index:10}nav p{margin-left:auto;text-align:right}.logo{font-weight:700;text-decoration:none;font-size:1.6rem;color:#eee;width:5%;min-width:60px;max-width:100px}.logo img{width:100%}button,input{padding:3px 10px;border:none;background:none;min-width:50px;border-radius:0}.sendMessage,main,nav{padding-left:5%;padding-right:5%}.sendMessage,main{padding-top:20px;padding-bottom:20px}.messages{margin-bottom:100px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}.message{width:80%;background-color:#d8dee3;padding:10px 15px;margin-bottom:10px;position:relative;border-radius:5px}.other{background-color:#e8ecee;box-shadow:3px 3px 3px rgba(0,0,0,.15)}.other:before{display:block;content:" ";width:24px;height:24px;position:absolute;bottom:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#d8dee3;border-radius:2px;z-index:-1;background-color:#e8ecee;left:-12px}.self{-webkit-align-self:flex-end;align-self:flex-end}.self:after{display:block;content:" ";width:24px;height:24px;position:absolute;bottom:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#d8dee3;border-radius:2px;z-index:-1;right:-12px}.user{font-weight:400}.timestamp{text-align:right;color:#888;font-size:.8rem}.sendMessage{display:-webkit-flex;display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;background-color:rgba(52,73,94,.9)}.sendMessage input{-webkit-flex:4 1;flex:4 1;color:#eee;border-bottom:2px solid #ecf0f1;transition:all .1s ease-in-out}.sendMessage input:focus{border-color:#3498db;transition:all .1s ease-in-out}.sendMessage button{-webkit-flex:1 1;flex:1 1;font-weight:700;color:#eee;background-color:#3498db;cursor:pointer;border-radius:5px 5px 5px 0;transition:all .1s ease-in-out}.sendMessage button:active,.sendMessage button:hover{background-color:#9b59b6;transition:all .1s ease-in-out}.namePicker{margin-top:50px;text-align:center}.namePicker input{text-align:center;margin:15px auto;display:block;border-bottom:2px solid #34495e;transition:all .1s ease-in-out}.namePicker input:focus{border-color:#9b59b6;transition:all .1s ease-in-out}.namePicker button{background-color:#3498db;color:#eee;padding:5px 40px;border-radius:5px;cursor:pointer;transition:all .1s ease-in-out}.namePicker button:active,.namePicker button:hover{background-color:#9b59b6;transition:all .1s ease-in-out}.msg-enter{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0;transition:.5s}.msg-enter.msg-enter-active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.newRoom{margin-top:50px}.newRoom input{width:250px;border-bottom:2px solid #34495e;transition:all .1s ease-in-out}.newRoom input:focus{border-color:#9b59b6;transition:all .1s ease-in-out}.newRoom button{background-color:#3498db;color:#eee;padding:5px 15px;border-radius:5px 5px 5px 0;cursor:pointer;transition:all .1s ease-in-out}.newRoom button:active,.newRoom button:hover{background-color:#9b59b6;transition:all .1s ease-in-out}.none{text-align:center}
/*# sourceMappingURL=main.c9183c34.chunk.css.map */