:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #17242a; color: #fff; }
main { position: relative; isolation: isolate; display: flex; min-height: 100svh; flex-direction: column; align-items: center; background: url('/assets/background.jpg') center center / cover no-repeat; text-align: center; }
.shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 18 24 / 48%), rgb(7 18 24 / 36%) 50%, rgb(7 18 24 / 48%)); }
header { padding: clamp(2rem, 6vh, 4rem) 1.5rem 0; font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.5 Arial, sans-serif; letter-spacing: .015em; }
h1 { margin: clamp(5rem, 15vh, 10rem) 1.5rem 3rem; max-width: 30ch; font: 400 clamp(2.5rem, 5vw, 4.5rem)/1.15 Georgia, serif; text-shadow: 0 2px 18px rgb(0 0 0 / 35%); }
@media (max-width: 600px) { main { background-position: 53% center; } h1 { margin-top: 20vh; } }