*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{background-attachment:fixed;background-image:url(https://source.unsplash.com/random/1920x1080?wallpaper,landscape);background-position:bottom;background-repeat:no-repeat;background-size:cover;font-family:sans-serif;font-size:16px;height:100%;max-width:100vw}button{cursor:pointer}input{cursor:auto}.App{color:#4c768d;height:100vh;width:100%}.nav-bar{align-items:center;background-color:#00000042;box-shadow:0 5px 15px rgba(0,0,0,.35);color:#88dded;display:flex;justify-content:space-between;padding:10px 30px;position:fixed;width:100vw}.nav-bar>h1{font-size:40px}.sign-out{background-color:#1c2c4c;border:1px solid #1c2c4c;border-radius:5px;color:#88dded;font-weight:900;padding:15px 20px}.welcome{color:#7cc5d9;text-align:center}.welcome>h2{font-size:35px}.welcome :is(h2,p,img){margin-bottom:20px}.center{align-items:center;display:flex;height:100%;justify-content:center}.center,.chat-box{background-color:#00000096}.messages-wrapper{padding:80px 30px}.chat-bubble{align-items:flex-start;background-color:#7cc5d9;border-radius:20px 20px 20px 0;box-shadow:-2px 2px 1px 1px #4c768d;color:#1c2c4c;display:flex;margin-bottom:20px;max-width:calc(100% - 50px);padding:15px;width:-webkit-max-content;width:max-content}.chat-bubble.right{background-color:#fff;border-radius:20px 20px 0 20px;box-shadow:-2px 2px 1px 1px #88dded;margin-left:auto}.chat-bubble__left{border-radius:50%;height:35px;margin-right:10px;width:35px}.user-name{color:#1c2c4c;font-size:.9rem;font-weight:700;margin-bottom:5px}.user-message{word-break:break-all}.message-time{display:block;text-align:right}.send-message{bottom:0;display:flex;padding:20px 30px;position:fixed;width:100%}.send-message>input{background-color:#fff;border:none;border-radius:5px 0 0 5px;box-shadow:0 22px 70px 4px rgba(0,0,0,.56);color:#1c2c4c;flex-grow:1;font-size:1rem;height:40px;padding:10px}.send-message>input:placeholder{color:#ddd}.send-message>:is(input,button):focus{border-bottom:1px solid #7cc5d9;outline:none}.send-message>button{background-color:#7cc5d9;border:1px solid #7cc5d9;border-radius:0 5px 5px 0;color:#242443;font-weight:600;height:40px;padding:5px 10px;width:70px}@media screen and (min-width:0px) and (max-width:500px){.messages-wrapper{padding:80px 5px}.nav-bar{padding:10px}.nav-bar>h1{font-size:30px}.welcome>h2{font-size:25px}}
/*# sourceMappingURL=main.3188ae61.css.map*/