body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#282c34;color:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{text-align:center}.app-main{display:flex;min-height:calc(100vh - 115px);font-size:calc(10px + 2vmin)}.app-navigation-content{display:flex;flex-direction:column;align-items:center;width:100%}.app-navigation-items{width:300px;display:flex;flex-direction:column;align-items:flex-start;background-color:#5c5c5c;padding-top:5px;padding-right:15px;border-top-right-radius:10px;border-bottom-right-radius:10px}.app-navigation-item{text-decoration:none;color:#fff;background-color:gray;width:100%;padding:5px;margin-bottom:2px;border-top-right-radius:10px;border-bottom-right-radius:10px;display:flex;align-items:center}.app-navigation-item.selected{background-color:#3b3b3b}.user-form{display:flex;flex-direction:column;width:300px;margin-left:calc(50% - 150px);padding-top:calc(50vh - 200px)}.user-form button{background-color:#484747;color:#fff;outline:none;border:1px solid transparent;font-size:1.2rem;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.user-form input#name{font-size:1.2rem;border-top-left-radius:10px;border-top-right-radius:10px;border:1px solid transparent;margin-top:1rem}.messages{min-height:calc(100vh - 220px);min-width:400px;background-color:#626262;border-radius:10px;padding:.5rem;display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:100}.message-form{background-color:#444;padding:13px 5px 5px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;top:-7px;position:relative;display:flex}input.form-input{width:calc(100% - 50px);border-radius:10px;outline:none;border:1px solid transparent}.message{text-align:start;width:100%;margin-bottom:5px}.message.reply{text-align:end}.message .date{font-size:.75rem}.message-bubble{display:inline-block;background-color:#505050;font-size:1.2rem;padding:5px;border-radius:10px 10px 10px 0}.reply .message-bubble{border-bottom-left-radius:10px;border-bottom-right-radius:0}.profile{display:flex;align-items:center;background:#3b3b3b;border-top-left-radius:10px;border-top-right-radius:10px;padding:5px 5px 10px;position:relative;top:5px}.profile-pic{border-radius:50%;margin-right:10px}.btn-icon{cursor:pointer}