:root { color-scheme: light; font-family: Arial, sans-serif; color: #162e40; background: #f2f5f8; line-height: 1.6; } body { margin: 0; } .login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; box-sizing: border-box; } .login-card { width: min(100%, 26rem); padding: 1.5rem; background: white; border: 1px solid #899ba8; border-radius: .6rem; box-shadow: 0 .25rem 1rem #162e4020; } .brand { margin: 0; color: #154865; font-weight: bold; font-size: 1.3rem; } h1 { margin-block: .4rem; } label { display: flex; flex-direction: column; gap: .3rem; margin-block: 1rem; font-weight: bold; } input, button, .login-link { font: inherit; padding: .65rem; border: 1px solid #687c8c; border-radius: .3rem; } input { direction: ltr; text-align: start; } button, .login-link { background: #154865; color: white; cursor: pointer; } .login-link { display: inline-block; text-decoration: none; } button:disabled { background: #e5e9ed; color: #495762; cursor: wait; } :focus-visible { outline: 3px solid #a74c00; outline-offset: 3px; } #login-error { padding: .7rem; color: #7d1a1d; border: 1px solid #9b2226; background: #fff0f0; } [hidden] { display: none !important; }