@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&family=Raleway&display=swap";*{box-sizing:border-box}body{margin:0}img{max-width:100%}html{height:100%;font-size:1em}h1,h2,h3,h4,p,a,ul,li{margin:0;padding:0}h1,h2,h3,h4{font-family:Poppins,sans-serif}p,a,li,span,label,input,legend,tr,td,th{font-family:Raleway,sans-serif;font-size:1.2rem}header{background-color:#005089;display:flex;flex-wrap:wrap;padding:.5em}header a{text-decoration:none}header i.material-icons{color:#fff;font-size:3em;width:fit-content;display:block;margin:auto 0 auto auto;transition:.2s}header i.material-icons:hover{cursor:pointer;color:#294c60}nav{background-color:#005089;position:fixed;bottom:0;width:100%}@media screen and (min-width: 600px){nav{position:sticky;top:0}}nav ul{display:flex;flex-wrap:wrap;justify-content:space-around;padding:1em}@media screen and (min-width: 600px){nav ul{justify-content:right;padding:0}}nav ul li{list-style-type:none}nav ul li a{transition:.2s;text-decoration:none;color:#fff}@media screen and (min-width: 600px){nav ul li a{display:block;padding:1em}nav ul li a:hover{background-color:#adb6c4;color:#294c60}}nav ul li a img{width:2.5em}@media screen and (min-width: 600px){nav ul li a img{display:none}}nav ul li a span{display:none}@media screen and (min-width: 600px){nav ul li a span{display:block}}footer{background-color:#294c60;display:flex;flex-wrap:wrap;justify-content:center}footer a{margin:auto .5em}footer p{color:#fff;margin:auto 0}main{transition:.2s}@media screen and (min-width: 600px){main{flex:1}}main #post,main #searchPost{display:flex;justify-content:center;gap:2em;flex-wrap:wrap}main .profile-img{border-radius:50%}main .card{margin:1em 0;width:90%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:10px;max-width:25em}main .card .post-user{border-top-left-radius:10px;border-top-right-radius:10px;background-color:#ffd080;display:flex;justify-content:flex-start;align-items:center;color:#fff}main .card .post-user~p{margin:1em}main .profile-img{width:2em;margin:.5em}main #searchForm .date{display:none}.dark main{background-color:#000}form{background-color:#adb6c4;height:auto}form .flex-form{display:flex;justify-content:center;flex-wrap:wrap;color:#fff}form .flex-form div{display:grid;grid-template-columns:4em 1fr;margin-top:1em;padding-left:1em}form .flex-form div input{border:none}form .flex-form .to label{padding-left:1.3em}form button{width:15em;height:2em;border:none;color:#fff;background-color:#005089;border-radius:5px}form .button-center{padding:1.5em 0;display:flex;justify-content:center;align-items:center}#login-error-msg-holder{width:100%;display:grid;justify-items:center;align-items:center}#login-error-msg,#register-error-msg{width:23%;text-align:center;margin:0;padding:5px;font-size:12px;font-weight:700;color:#8a0000;border:1px solid #8a0000;background-color:#e58f8f;opacity:0}#error-msg-second-line{display:block}#login-form{align-self:flex-start;display:grid;justify-items:center;align-items:center}.login-form-field::placeholder{color:#3a3a3a}.login-form-field{border:none;border-bottom:1px solid #3a3a3a;margin-bottom:10px;border-radius:3px;outline:none;padding:0 0 5px 5px}#login-form-submit{width:100%;padding:7px;border:none;border-radius:5px;color:#fff;font-weight:700;background-color:#3a3a3a;cursor:pointer;outline:none}body{display:flex;flex-direction:column;height:100vh}body .underline-link{color:#ffd080;text-decoration:none;display:block;margin:2em auto;width:fit-content}body .underline-link:hover{text-decoration:underline}body .logo{width:3em}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#000000b3;z-index:1;justify-content:center;align-items:center}.modal-content{display:block;background-color:#fff;border-radius:5px;padding:20px;width:300px;text-align:center}.close{position:absolute;top:0;right:0;padding:10px;cursor:pointer;color:#fff;width:2em}form{display:flex;flex-direction:column}label,input,button{margin:5px 0}main #account{padding:1em}main #account h2{font-size:2em}main #account .profile-img{width:6em;margin-top:1em}main #account p{margin:1.5em 0}main #account #user-info{display:flex;gap:0 4em;flex-wrap:wrap}main #account .user-info-item{min-width:125px}main #account button{margin:1.5em 0;width:15em;height:2em;border:none;color:#fff;background-color:#005089;border-radius:5px}.dark main{color:#fff}.dark .card{box-shadow:0 0 1em gray}#login{width:90%;margin:0 5%}#login #login-form-wrapper #login-form{border-radius:5px;margin-top:15vh}#login #login-form-wrapper #login-form input{margin:.7em auto}#login #login-form-wrapper #login-form #login-form-submit{width:35%}#login #login-form-wrapper #login-form ::placeholder{color:gray;opacity:.6}#login #login-form-wrapper .underline-link{color:#4242ff}.dark #login .underline-link{color:#ffc49b}