@font-face { font-family: "League Spartan"; src: url("/fontti/league-spartan-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --punainen: #a14638; --musta: #221f20; --valkoinen: #ffffff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(ellipse 85% 130% at 50% 100%, #a9513f 0%, #a14638 55%, #983f33 100%) fixed; color: var(--valkoinen); font: 400 17px/1.5 "League Spartan", sans-serif; }
.kirjaudu { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 40px 20px; text-align: center; }
h1 { margin: 0; font-weight: 800; font-size: clamp(34px, 9vw, 60px); line-height: 0.95; text-transform: uppercase; }
form { display: grid; gap: 10px; width: min(320px, 100%); text-align: left; }
input { width: 100%; text-align: center; min-height: 48px; padding: 0 14px; border: 2px solid var(--valkoinen); background: transparent; color: var(--valkoinen); font: 400 17px "League Spartan", sans-serif; }
input:focus-visible { outline: 3px solid var(--valkoinen); outline-offset: 3px; }
.virhe { margin: 0; font-weight: 700; }
input::placeholder { color: var(--valkoinen); opacity: 0.75; }