@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap);#user-section{width:100%;background:#3d5a80;color:#fcfcfc;padding:20px 40px}#user-section .user-name{font-weight:700;text-transform:capitalize}#user-section .logged-in{display:flex;align-items:center}#user-section #user-form{box-sizing:border-box;display:flex}#user-section #user-input{padding:6px 12px;outline:none;font-size:1rem;flex-basis:75%;height:40px;border:none}#user-section #clear-messages,#user-section #log-out,#user-section #user-submit{border:none;padding:6px 12px;background:#fca311;flex-basis:25%;color:#fff;text-transform:uppercase;font-weight:700;height:40px;margin-left:-1px}#user-section #clear-messages:hover,#user-section #log-out:hover,#user-section #user-submit:hover{cursor:pointer;background:#e38a00}#user-section #clear-messages,#user-section #log-out{margin-left:4px;flex-basis:50px;height:30px}#user-section #clear-messages{margin-left:auto}.messages{display:flex;flex-direction:row;flex-basis:67%;flex-wrap:wrap}.messages .not-in-chat{text-align:center;padding:100px 20px;font-size:1.5rem;width:100%;color:grey}.messages .message-bubble{margin-bottom:10px;background:#eee;padding:10px 20px;width:67%;border-radius:10px}.messages .message-bubble.current-user{margin-left:auto;background:#e8f4f9}.messages .user{margin-right:6px;font-weight:700;color:#3d5a80}#message-input-form{width:100%;display:flex;margin-top:20px}#message-input-form #message-input{width:100%;padding:10px 8px;border:1px solid #666;border-radius:0;outline:none;flex-basis:75%}#message-input-form #message-submit{border-radius:0;border:none;background:#3d5a80;color:#fcfcfc;flex-basis:25%;font-weight:700;text-transform:uppercase;height:40px}#message-input-form #message-submit:disabled{background:grey}.chat,.chat-container{display:flex;width:100%;flex-flow:column}.chat{justify-content:center;align-items:center;background:#fff;border-bottom:3px solid #fca311;border-radius:0 0 5px 5px}.chat-container{width:100%;overflow:hidden;padding:20px 40px 30px}@media only screen and (max-width:600px){.chat{border-radius:0}}body,div,h1,h2,html,input,p{box-sizing:border-box;margin:0;padding:0}body{font-family:Lato,sans-serif;background:radial-gradient(#3d5a80,#293241)}.app{display:flex;flex-flow:column;width:700px;max-width:100%;margin:20px auto;box-shadow:0 0 8px 4px rgba(0,0,0,.1)}.app-header{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;padding:20px;background:#293241;color:#fcfcfc;border-top:5px solid #fca311;border-radius:5px 5px 0 0}.app-motto{margin:0 15px;font-weight:700;font-size:1.1rem}.app-logo{width:36px;height:36px;padding:10px;border-radius:50%;background:#fcfcfc}@media only screen and (max-width:600px){.app{margin:0}.app-header{border-radius:0}}
/*# sourceMappingURL=main.4b7310bd.chunk.css.map */