:root {
  --color-main: #2d3037;
  --color-sec: #939194;
  --color-ter: #4f5354;
  --color-accent: #83f1e8;
}

body { margin:0; font-family: system-ui, Arial, sans-serif; background: var(--color-main); color: var(--color-sec); }
.container { max-width: 480px; margin: 10vh auto; background: var(--color-ter); padding: 24px; border-radius: 16px; text-align: center; }
h1 { color: var(--color-accent); }
label { display:block; margin:12px 0 6px; font-weight:600; }
input { width:100%; padding:10px; border-radius:8px; border:1px solid var(--color-sec); background:#1f2125; color:white; }
button { margin-top:14px; padding:10px 14px; border:0; border-radius:12px; background:var(--color-accent); color:black; cursor:pointer; font-weight:bold; }
button:hover { filter:brightness(1.1); }
.error { background:#7f1d1d; padding:10px; border-radius:8px; margin:10px 0; color:white; }
.hint { font-size:0.9em; opacity:0.8; margin-top:12px; }
.celebration h1 { font-size:2em; }

footer { position:fixed; right:1rem; bottom:1rem; text-align:right; }
.footer-socials-vertical { display:flex; flex-direction:column; gap:0.5rem; align-items:flex-end; }
.footer-socials-vertical .social-item { display:flex; align-items:center; gap:0.5rem; }
.footer-socials-vertical a { background:var(--color-accent); color:black; padding:0.3rem 0.6rem; border-radius:5px; text-decoration:none; font-size:0.85rem; }
.footer-copy { font-size:0.75rem; color:var(--color-sec); margin-top:0.5rem; }