* { box-sizing:border-box; }

html { background:white cover; color:black; font-family:'Noto Sans', 'Arial', sans-serif; }
body { margin:0; padding:0; min-height:100vh; background:radial-gradient(ellipse at center, #fff 0%, #edf0f3 50%, #cbd2dc 100%); display:flex; align-items:center; justify-content:center; flex-direction:column; }

hr { border-color:#FF671F; border-width:0.1em; border-style: solid; width:100%; margin:0.8em 0;}
button { border:0 transparent; border-radius:50em; padding:0.7em 1em; background-color:#00a7b5; color:white; font-weight:700; font-size:1em; cursor:pointer; }
button:focus { border:none; outline:none; }
button:hover { background-color:#0097a5; box-shadow:0 0 10px 0 #a8a8a8; }
button[disabled] { background-color: gray !important; cursor: not-allowed; }

header { width:100%; top:0; overflow:hidden; position:relative; color:white; }
header::before { content:""; display:block; background:radial-gradient(ellipse at center, #1a3b65 0%, #052a58 100%); border-radius:50%; position:absolute; top:-95%; left:-15em; z-index:-1; height:190%; right:-15em; box-shadow:0 0 13px black; }
header::after { content:""; display:block; background:transparent; border-radius:50%; position:absolute; top:-95%; left:-15em; z-index:-1; height:190%; right:-15em; border:3px solid #c45b29; }
header div { text-align:center; margin:1.5em 0 4em; }
header div object { width:8em; height:8em; display:inline-block; }
header div span { font-family:TRUCE; display:block; font-size:4em; line-height:1em; margin:0.3em 0.3em 0.3em 0.45em; }
@media (max-width:400px) {
    header div { text-align:center; margin:1em 0 2em; }
    header div span { display:block; font-size:2em; line-height:1em; margin:0.3em; }
}

.centered:not([hidden]) { display:flex; width:100%; height:100%; align-items:center; justify-content:center; flex-direction:column; flex-grow:1; }

#alert-bar { background-color: #0077C8; color:white; width: 100%; }
#alert-bar > div { max-width: 50em; margin: 0.5em auto; display: flex; padding:0 0.5em; }
#alert-bar > div > button { border: none; padding: 0; margin-right: 0.5em; border-radius: 0.3em; background-color: white; color: black; font-size: 1.2em; font-weight: bold; width: 1.6em; height: 1.6em; line-height: 1em; align-self: center; cursor:pointer; }
#alert-bar > div > span { flex-grow: 1; align-self:center; }

#login-container { max-width: 35em; padding: 0 1.5em; }
#login-container h3 { text-transform:uppercase; color:#0077C8; text-align:center; }
#login-container p { line-height:1.5em; }
#login-container p var:not(:empty) { background:#eee; padding:0.1em 0.3em; border:1px solid #ddd; }
#login-container ol li { margin:0.7em 0; }
#login-container .login-group { position:relative; margin:2em 0; width:100%; max-width:24em; }
#login-container .login-group input { font-size:1.3em; line-height:1.3em; background-color:transparent; color:#002554; border:1px none #0077c8; border-bottom-style:solid; width:100%; }
#login-container .login-group input:focus { outline:none; }
#login-container .login-group input:invalid { box-shadow:none; }
#login-container .login-group label { color:#aaa; font-size:1.2em; position:absolute; pointer-events:none; left:0.5em; top:0.1em; transition:300ms ease all; user-select:none; }
#login-container .login-group input:focus ~ label,
#login-container .login-group input:valid ~ label { top:-1.1em; font-size:0.8em; color:#888; }
#login-container .login-group button { width:100%; }
@media (max-height:750px) {
    #login-container .login-group { margin:1em 0; }
}