* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background-color: #FAFBFF; } .container { height: 100vh; max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .login-logo h1{ margin: 0; } .login-logo{ height: 50px; width: 50px; } [class*="col-"] { padding: 0 15px; flex: 0 0 auto; } .login-body{ width: 100%; height: auto; text-align: center; background-color: #FFFFFF; border: solid 1px #ECF0F5; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25); padding: 12px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } .login-body h2{ font-size: 40px; margin-top: 10px; margin-bottom: 10px; } .login-form{ display: flex; flex-direction: column; width: 95%; } .login-form a{ text-align: right; text-decoration: none; color: black; font-style: italic; font-size: 15px; margin-top: 5px; opacity: 60%; } .login-form input { margin-top: 15px; padding: 10px; border: 1px solid #E2E8F0; border-radius: 20px; font-size: 16px; color: #333; background-color: #f9f9f9; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .login-form input:hover { border-color: #888; } .login-form input:focus { border-color: #007BFF; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } .login-form input::placeholder { color: #aaa; font-style: italic; } .login-button{ padding: 10px; color: white; background-color: black; border: none; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25); font-size: 15px; border-radius: 20px; transition: all 0.3s ease, box-shadow 0.3s ease; margin-top: 20px; font-size: 18px; } .login-button:hover{ cursor: pointer; opacity: 75%; } .login-body a, p{ text-decoration: none; color: #333; transition: all 0.3s ease, box-shadow 0.3s ease; } .login-body a:hover{ opacity: 70%; } [class*="col-"] { padding: 15px; flex: 0 0 auto; box-sizing: border-box; } .col-1 { flex: 0 0 8.33%; max-width: 8.33%; } .col-2 { flex: 0 0 16.66%; max-width: 16.66%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33%; max-width: 33.33%; } .col-5 { flex: 0 0 41.66%; max-width: 41.66%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33%; max-width: 58.33%; } .col-8 { flex: 0 0 66.66%; max-width: 66.66%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33%; max-width: 83.33%; } .col-11 { flex: 0 0 91.66%; max-width: 91.66%; } .col-12 { flex: 0 0 100%; max-width: 100%; } @media (max-width: 768px){ [class*="col-"] { max-width: 70%; } } @media (max-width: 456px){ [class*="col-"] { max-width: 90%; } }