:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #000; }
body { min-height: 100dvh; display: grid; place-items: center; overflow: hidden; }
main { width: 100vw; height: 100dvh; display: grid; place-items: center; background: #000; }
.hero { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #000; }
.error-page { min-height: 100dvh; display: grid; place-items: center; padding: 2rem; text-align: center;
  font-family: Arial, Helvetica, sans-serif; background: #000; color: #fff; }
.error-card { max-width: 44rem; }
.error-code { margin: 0 0 .5rem; font-size: clamp(3rem, 12vw, 8rem); font-weight: 300; letter-spacing: .12em; }
.error-text { margin: 0 0 1.5rem; color: #b9c2cc; }
.error-link { color: #fff; text-decoration-color: #42d7ff; text-underline-offset: .25em; }