.auth-body{display:grid;width:300px;height:400px;background-color:#f0f8ff;border-radius:20px;margin-top:100px;box-shadow:10px 10px 10px #0000001e;animation-name:auth-animation;animation-duration:1s;animation-iteration-count:1}h3{margin-left:20px;text-align:start;color:#71b158}.logo{display:flex;justify-self:center;align-self:center}input{justify-self:center;display:flex;margin-top:25px}button{margin-top:10px;margin-left:10px}.auth-inputs{display:flexbox;place-content:start}@keyframes auth-animation{0%{position:relative;top:100px;opacity:0}to{position:relative;top:0;opacity:.9}}*{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{background-color:#ffffffb6;display:flex;justify-content:center;margin:0}.app-body{display:grid;grid-row:1;width:100vw;height:100vh;border-radius:20px;background-color:#f0f8ffc4;box-shadow:5px 10px 10px #0000002f;animation-name:appBody;animation-duration:1s;animation-iteration-count:1}.header-section{width:100%;height:75px;display:flex;justify-content:center;align-items:center;text-align:center;color:#887c7c;border-bottom:solid 1px rgba(128,128,128,.26);background-color:#f0f8ff;border-radius:20px}.navigation{display:flex;justify-self:center;width:90%;height:30px;background-color:transparent}.nav-icons{display:flex;justify-content:space-evenly;align-items:center;width:100%;height:30px;animation:navAnim .5s 1}.closed-nav{width:90%;height:30px;display:flex;justify-content:flex-end;align-items:center;border-radius:20px;background-color:transparent}.close-nav{position:relative;right:40px}.logout-icon,.settings-icon{cursor:pointer}.messages-section{place-content:start;width:100%;height:444px;place-self:center;overflow-y:auto;padding:10px;box-sizing:border-box}.private-room{place-content:start;width:100%;height:460px;place-self:center;overflow-y:auto;padding:10px;box-sizing:border-box;background-image:url(https://st3.depositphotos.com/9870662/13545/v/450/depositphotos_135452804-stock-illustration-heart-red-fashionable-seamless-pattern.jpg);background-position:center;animation:privateRoom 10s infinite alternate-reverse}.message-bar{background-color:#48ff00;border-radius:20px;margin-left:10px;margin-right:10px;padding:10px;max-width:90%;display:inline-block}.message{font-weight:400;color:#fff;font-size:large}#you{background-color:#71b158;display:flex;justify-self:end}#other{background-color:gray;display:flex;justify-self:start}#youInfo{justify-self:end}#otherInfo{justify-self:start}.msg-info{display:flex;font-weight:200;padding-bottom:10px;font-size:small;position:relative;bottom:25px;margin-left:10px;margin-right:10px}.logo{width:90px;height:70px;margin-top:5px}.logo:hover{cursor:pointer}.messages-input{place-self:end;width:100%;height:75px;background-color:#f0f8ff;border-radius:20px;border-top:solid 1px rgba(128,128,128,.26)}.input-section{gap:4px;width:100%;height:75px;display:flex;justify-content:center;align-items:center}input{border-radius:20px;border:1px solid rgba(128,128,128,.315);height:35px;width:280px;background-color:#fff;margin-bottom:20px}button{border-radius:20px;height:35px;width:70px;background-color:#71b158;color:#fff;border:solid 1px rgba(128,128,128,.315)}button:hover{background-color:#f0f8ff;color:#71b158;cursor:pointer}@keyframes appBody{0%{position:relative;top:100px;opacity:0}to{position:relative;top:0;opacity:.9}}@keyframes privateRoom{0%{background-position:left}to{background-position:center}}@media screen and (max-width: 768px){body{margin:0}.app-body{margin:0;height:100vh}.messages-section{height:84vh;place-content:start;width:100%;place-self:start;overflow-y:auto;padding:10px;box-sizing:border-box}.private-room{height:84vh}}@keyframes navAnim{0%{position:relative;left:200px;opacity:0}to{position:relative;left:0;opacity:1}}.dark-mode .app-body{background-color:#2e2e2e;color:#e0e0e0;box-shadow:5px 10px 10px #00000080}.dark-mode .header-section{background-color:#333;color:#fff}.dark-mode .navigation,.dark-mode .closed-nav{background-color:transparent;color:#fff}.dark-mode .messages-section,.dark-mode .private-room{background-color:#2b2b2b;color:#fff}.dark-mode .message-bar{background-color:#444;color:#fff}.dark-mode #you{background-color:#3a3f5c}.dark-mode #other{background-color:#555}.dark-mode .msg-info{color:#ccc}.dark-mode .messages-input{background-color:#333;color:#fff}.dark-mode .input-section input{background-color:#555;color:#fff}.dark-mode button{background-color:#5e8b7e;color:#fff}.dark-mode button:hover{background-color:#444;color:#5e8b7e}