@import url(https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&family=Langar&display=swap);*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Baloo 2",cursive}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{height:100vh;width:100%;color:#fff}.main-container{width:100%;min-height:100vh;background-image:linear-gradient(90deg,#e4afcb 0,#b8cbb8 0,#b8cbb8 0,#e2c58b 30%,#c2ce9c 64%,#6de3e6);display:flex;align-items:center;justify-content:center}.inner-container{overflow-x:hidden}.inner-container,.inner-container-join{height:600px;width:400px;background-color:rgba(0,0,0,.308);border-radius:17px;position:relative}.inner-container-join{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.app-name{font-family:"Langar",cursive;color:#00333b;font-size:3rem}.app-label{font-size:1.6rem}.h-line{width:90%;border-bottom:3px solid #fff}.joining-form{display:flex;flex-direction:column;align-items:center}.join-btn{margin-top:5px}.joining-form input{margin:8px 0;background-color:transparent;font-family:"Baloo 2",cursive;font-size:1rem;border:none;border-bottom:2px solid #fff;padding:5px 10px;width:70%;outline:none}.joining-form input::-webkit-input-placeholder{color:hsla(0,0%,96.1%,.699)}.joining-form input:-ms-input-placeholder{color:hsla(0,0%,96.1%,.699)}.joining-form input::-ms-input-placeholder{color:hsla(0,0%,96.1%,.699)}.joining-form input::placeholder{color:hsla(0,0%,96.1%,.699)}.joining-form input:focus{border-bottom:2px solid #147980}.nav{height:10%;background-color:rgba(0,0,0,.345);border-radius:17px 17px 0 0;display:flex;align-items:center;position:relative}.icon-img{height:64%;border-radius:12px;margin:10px 15px}.room-name{font-size:1.3rem}.burger{display:flex;flex-direction:column;z-index:4;cursor:pointer;margin:0 16px;position:absolute;right:0}.burger div{transition:all .3s ease}.line1{width:25px}.line1,.line2{border-top:3px solid #fff;padding:1.3px 0}.line2{width:18px}.line3{width:22px;border-top:3px solid #fff;padding:1.3px 0}.toggle .line1{transform:rotate(-45deg) translate(-10px,5px)}.toggle .line2{opacity:0}.toggle .line3{transform:rotate(45deg) translate(-4px,4px);width:25px}.users{position:absolute;top:100%;right:0;background-color:rgba(0,0,0,.7803921568627451);width:66%;z-index:2;display:flex;flex-direction:column;align-items:center;-webkit-clip-path:circle(10px at 10% 10%);clip-path:circle(10px at 102% 0);opacity:0;pointer-events:none;overflow-y:auto;transition:all .5s ease;max-height:350px}.show-users{pointer-events:all;opacity:1;-webkit-clip-path:circle(550px at 10% 10%);clip-path:circle(550px at 102% 0)}.users p{width:95%;background-color:hsla(0,0%,100%,.18823529411764706);padding:3px 0;margin:5px 0;border-radius:7px;text-align:center}.leave-btn{background-color:#aa2121;border:none;font-size:1.1rem;color:#fff;padding:1px 13px;border-radius:15px;cursor:pointer;font-family:"Baloo 2",cursive;outline:none;margin:9px 0}.leave-btn:active{background-color:#4d0e0e}.sender-bar{position:absolute;bottom:0;height:10%;width:100%;display:flex;align-items:center;border-radius:0 0 17px 17px;background-color:rgba(0,0,0,.345)}.sender-input{margin:0 20px;background-color:transparent;font-family:"Baloo 2",cursive;font-size:1.05rem;border:none;padding:5px 10px;width:70%;border-radius:13px;outline:none}.sender-input::-webkit-input-placeholder{color:hsla(0,0%,96.1%,.699)}.sender-input:-ms-input-placeholder{color:hsla(0,0%,96.1%,.699)}.sender-input::-ms-input-placeholder{color:hsla(0,0%,96.1%,.699)}.sender-input::placeholder{color:hsla(0,0%,96.1%,.699)}.send-btn{background-color:#28856f;border:none;font-size:1.1rem;color:#fff;padding:1px 13px;margin:0 6px;border-radius:15px;cursor:pointer;font-family:"Baloo 2",cursive;outline:none}.send-btn:active{background-color:#1f6857}.msg-box{width:100%;height:80%;overflow-y:auto}.curr-msg{float:right;background-image:linear-gradient(90deg,#288551,#28856f,#287885);border-radius:12px 12px 0 12px}.curr-msg,.other-msg{clear:both;margin:4px 12px;padding:3px 10px;max-width:80%;min-width:10%}.other-msg{float:left;background-image:linear-gradient(270deg,rgba(0,0,0,.345),rgba(0,0,0,.267));border-radius:12px 12px 12px 0}.other-msg h3{font-size:1.1rem;color:#dd4800}@media only screen and (max-width:800px){.main-container{background-image:linear-gradient(180deg,#e4afcb 0,#b8cbb8 0,#b8cbb8 0,#e2c58b 30%,#c2ce9c 64%,#6de3e6)}.inner-container,.inner-container-join{height:100vh;width:100%;border-radius:0}.nav,.sender-bar{border-radius:0}}
/*# sourceMappingURL=main.ce292758.chunk.css.map */