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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{height:100vh;width:100%;display:flex;justify-content:center;align-items:center;background-color:#121212;font-family:"Maven Pro",sans-serif}.App,.main-wrapper{flex-direction:column}.main-wrapper{height:100%;width:80%;position:relative;background-color:#535353}.sign-in-button{width:100%;height:20%;font-size:30px;position:relative;top:40%;bottom:40%;border:none;color:#fff;cursor:pointer;background-color:#1976d2}.sign-in-button:active,.sign-in-button:focus{outline:none}.header{width:100%;height:10%;background-color:#3f3f3f;display:flex;position:relative}.header-text{display:flex;justify-content:center;align-items:center;width:30%;font-size:30px;color:#fff;cursor:pointer}.logout-button{margin-left:auto;height:100%;width:20%;background-color:#1976d2;text-align:center;text-transform:uppercase;transition:.5s;background-size:200% auto;color:#fff;cursor:pointer;border:none;display:block}.logout-button:hover{background-position:100%;color:#fff;text-decoration:none}.room-navbar{position:relative;left:0;top:0;flex-direction:column;height:100%;width:30%;background-color:#3f3f3f}.room-id,.room-navbar{display:flex;border-radius:10px}.room-id{height:10%;justify-content:center;align-items:center;background-color:#616161;color:#fff;margin-bottom:2px;transition-duration:.4s;cursor:pointer}.room-id:hover{-webkit-filter:brightness(120%);filter:brightness(120%)}.room-wrapper{height:90%;position:absolute;top:10%;width:100%;display:flex}.room-options{position:absolute;bottom:0}.room-container{position:relative}.chat-wrapper,.room-container{width:100%;height:100%}.chat-main{width:70%;height:100%}.message-input{width:80%;height:96%;background-color:#3f3f3f;border:none;color:#fff}.message-input::-webkit-input-placeholder{color:grey}.message-input:-ms-input-placeholder{color:grey}.message-input::placeholder{color:grey}.message-input:active,.message-input:focus{outline:none}::-webkit-input-placeholder{color:#fff}:-ms-input-placeholder{color:#fff}::placeholder{color:#fff}.input-form{width:100%;height:8%;position:absolute;bottom:0;display:flex}.send-msg{width:20%;height:100%;border:none;padding:15px 45px;justify-content:center;align-items:center;display:flex;text-align:center;text-transform:uppercase;color:#fff;background-color:#1976d2;cursor:pointer;display:block}.send-msg:hover{text-decoration:none}.send-msg:active,.send-msg:focus{outline:none}.messages{overflow:auto;height:92%;position:relative}img{height:30px;width:30px;border-radius:50%;margin-left:10px;margin-right:10px}.message{display:flex;align-items:center;border-radius:20px;padding:10px;position:relative;min-height:5%;width:50%;transition-duration:.4s}.message::-webkit-input-placeholder{color:grey}.message:-ms-input-placeholder{color:grey}.message::placeholder{color:grey}.message.send{flex-direction:row-reverse;margin-left:auto}.message.received,.message.send{margin-top:20px;background-color:#616161;color:#fff}.message.received{margin-right:auto}.message>div{width:80%;word-break:break-all}.message-placeholder,.message>div{height:100%;display:flex;justify-content:center;align-items:center}.message-placeholder{font-weight:400;font-size:60px;color:#f5f5f5}.createRoomButton{background-color:#1976d2;height:100%;border:none;cursor:pointer;width:15%;position:absolute;text-align:center;text-transform:uppercase;transition:.5s;background-size:200% auto;color:#fff}.createRoomButton:hover{background-position:100%;color:#fff;text-decoration:none}.createRoomButton:active,.createRoomButton:focus{outline:none}.createRoomInput::-webkit-input-placeholder{color:grey;font-size:12px}.createRoomInput:-ms-input-placeholder{color:grey;font-size:12px}.createRoomInput::placeholder{color:grey;font-size:12px}.createRoomForm{width:50%;height:100%}.createRoomInput{height:96%;font-size:30px;width:90%;border:none;background-color:#616161;color:#fff}.createRoomInput:active,.createRoomInput:focus{outline:none}.create-wrapper{height:100%;width:50%;display:flex;align-items:center;flex-wrap:nowrap}.join-form{width:100%;position:absolute;bottom:0;height:8%;display:flex}.join-input{width:80%;border:none;background-color:#616161;color:#fff}.join-input::-webkit-input-placeholder{color:grey;font-size:12px}.join-input:-ms-input-placeholder{color:grey;font-size:12px}.join-input::placeholder{color:grey;font-size:12px}.join-input:active,.join-input:focus{outline:none}.join-button{height:100%;width:20%;text-align:center;text-transform:uppercase;transition:.5s;color:#fff;background-color:#1976d2;border:none;cursor:pointer}.nav{display:none}@media only screen and (max-width:600px){.main-wrapper{width:100%;height:100%}.room-navbar{display:none}.chat-main{width:100%}.header{height:8%}.header,.send-msg{display:flex;align-items:center}.send-msg{justify-content:center}.createRoomButton{height:50%;margin-top:16px}.createRoomInput{height:46%;width:50%;margin-left:10px;margin-top:16px;font-size:12px}.logout-button{height:50%}.createRoomForm{width:100%}.createRoomInput::-webkit-input-placeholder{opacity:0}.createRoomInput:-ms-input-placeholder{opacity:0}.createRoomInput::placeholder{opacity:0}.header-text{display:none}button{font-size:12px}.nav{display:inline}.room-mobile{position:absolute;width:100%;height:100%;background-color:#3f3f3f;z-index:100}}
/*# sourceMappingURL=main.8a2150dc.chunk.css.map */