@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mitr:wght@200;700&display=swap";body{background-color:#000;margin:0;padding:0}*{font-family:Kanit,sans-serif}body{overflow:hidden}.App{text-align:center;width:100%;margin:0;padding:0}.App header{background-color:#000;height:10vh;min-height:50px;color:#fff;position:fixed;width:100%;top:0;display:flex;align-items:center;justify-content:space-between;z-index:99;padding:10px;box-sizing:border-box}.App section{display:flex;flex-direction:column;justify-content:center;min-height:80vh;width:100%;background-color:#000;gap:30px}main{padding:10px;height:78vh;margin:10vh 0;overflow-y:scroll;display:flex;flex-direction:column;font-size:.8rem}main::-webkit-scrollbar{width:.25rem}main::-webkit-scrollbar-track{background:#1e1e24}main::-webkit-scrollbar-thumb{background:#000000}form{height:7vh;position:fixed;bottom:10px;width:100%;display:flex;font-size:1rem;padding-left:10%;padding-right:10%;border-radius:10px}form button{width:15%;background-color:#3b71ca;display:flex;flex-direction:row;align-items:center;justify-content:center;border-top-right-radius:10px;border-bottom-right-radius:10px}input{line-height:1.5;width:65%;font-size:1rem;background:rgb(19,19,19);color:#fff;outline:none;border:none;padding:0 10px;border-top-left-radius:10px;border-bottom-left-radius:10px}.sign-out{border-radius:10px;font-size:.9rem;background-color:#dc4c64;padding:7px 15px}button{background-color:#282c34;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;font-size:1rem}button:disabled{opacity:.5;cursor:not-allowed}.sign-in{color:#282c34;background:white;max-width:400px;margin:0 auto}ul,li{text-align:left;list-style:none}p{max-width:500px;margin-bottom:12px;line-height:24px;padding:10px 20px;border-radius:25px;position:relative;color:#fff;text-align:center}.message{display:flex;align-items:center}.sent{flex-direction:row-reverse}.sent p{color:#fff;background:#0b93f6;align-self:flex-end}.received p{background:#e5e5ea;color:#000}img{width:40px;height:40px;border-radius:50%;margin:2px 5px}.logoImg{width:15%;height:auto;border-radius:0;margin:2px 5px}.login-with-google-btn{transition:background-color .3s,box-shadow .3s;padding:12px 16px 12px 42px;border:none;border-radius:3px;box-shadow:0 -1px #0000000a,0 1px 1px #00000040;color:#757575;font-size:14px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);background-color:#fff;background-repeat:no-repeat;background-position:12px 11px;width:20%;margin-left:40%}.login-with-google-btn:hover{box-shadow:0 -1px #0000000a,0 2px 4px #00000040}.login-with-google-btn:active{background-color:#eee}.login-with-google-btn:focus{outline:none;box-shadow:0 -1px #0000000a,0 2px 4px #00000040,0 0 0 3px #c8dafc}.login-with-google-btn:disabled{filter:grayscale(100%);background-color:#ebebeb;box-shadow:0 -1px #0000000a,0 1px 1px #00000040;cursor:not-allowed}@media (max-width: 800px){.logoImg{width:30%}form{border-radius:0;padding:0;bottom:0}input{width:80%;border-radius:0}form button{width:20%;border-radius:0}.login-with-google-btn{width:50%;margin:25%}}@media (max-width: 500px){.logoImg{width:35%}}