*,:after,:before{padding:0;margin:0;box-sizing:border-box}html{overflow:hidden}body{background:#191970;display:flex;align-items:center;justify-content:center}.login{margin:10rem auto;height:25rem;width:25rem;text-align:center;position:relative;border-radius:10px;background:rgba(126,126,224,.233)}.login h1{padding-top:1rem;font-size:2.5rem;color:#fff;margin:2rem 0}.login label{font-size:2rem;display:inline-block;color:orange}.login input{padding:5px;font-size:1.2rem;outline:none;border:1px solid #ff4500;border-radius:20px;margin:10px auto;height:3rem;width:calc(100% - 1rem)}#opt{font-size:1.4rem;color:#8fdb43}.login button{margin-top:1rem;font-size:1.2rem;height:2.2rem;width:5rem;border-radius:10px;background:orange;color:#fff;border:none}.login button:hover{background:transparent;border:2px solid orange;transform:scale(1.008)}.logout{transform:translateX(35rem);height:2rem;width:4.5rem;font-size:1rem;font-weight:700;color:orange;background:transparent;border:none}.chat-view{margin:5rem auto;background:rgba(126,126,224,.233);height:32rem;border-radius:10px;width:40rem}.chat-header{height:4rem;border-bottom:2px solid orange;font-size:1.2rem;color:#fff;text-align:center;width:100%}.chat-header span{color:#d19525}.chatbox{margin:5px;padding:10px;height:21rem;overflow-y:auto;position:relative;display:flex;flex-direction:column;background:#f7f3f3;font-size:1.2rem}.inner-msg{color:#000;font-size:1.2rem;padding:6px;margin:8px;border-radius:10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;box-shadow:0 0 3px #000}.message .inner-msg{float:left;background:#f8f875;color:#000;text-shadow:0 0 1px #000}.current-user .inner-msg{float:right;background:#b6eed4;color:#000;text-shadow:0 0 1px #000}.current-user .username,.message .username{color:blue}.chat-input{margin-top:1rem;height:4rem;width:100%}.chat-input input{border:2px solid orange;height:2.6rem;font-size:1.2rem;padding:6px;width:90%;outline:none;border-radius:20px;font-family:Times New Roman,Times,serif}.chat-input button{height:2.5rem;margin:0 2px;width:3.7rem;background:orange;border-radius:15px;font-size:1.1rem;border:none}button{cursor:pointer}@media screen and (max-width:645px){.logout{transform:translateX(25rem);height:2rem;width:4.5rem;font-size:1rem}.chat-view{margin:5rem auto;height:32rem;width:30rem}.chat-input input{height:2.6rem}.chat-header{height:3rem;font-size:1rem}.chatbox{height:22rem;font-size:1rem}.inner-msg{font-size:1.1rem;padding:4px;margin:6px;border-radius:5px}.chat-input button{height:2rem;width:2.5rem;border-radius:10px;font-size:.9rem}}@media screen and (max-width:500px){.logout{transform:translateX(18.6rem);height:2rem;width:4rem;font-size:.9rem}.chat-view{margin:3rem auto;width:23rem}.chat-header h1{font-size:1.5rem;padding-bottom:3px}.chat-header{height:auto}.inner-msg{font-size:1rem;padding:3px;margin:5px;border-radius:5px}.chat-input input{width:86%;height:2.5rem;border-radius:10px}.chat-input button{height:2.1rem;border-radius:5px}}@media screen and (max-width:436px){.login{margin:5rem auto;width:20rem}.login h1{font-size:2.5rem}.login label{font-size:1.8rem}.login button{font-size:1rem}}