/* The page is the scene: a pixel picture filling the window, and the name
   in gold over its sky. scene.js paints the picture; without it the
   background gradient stands in for it. */

:root {
  --night: #040408;
  --dusk: #4a4a78;
  --dawn: #d7795f;
  --earth: #221c28;
  --thick: #2a0a1e;
  --gold: #c89848;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(180deg,
    var(--night) 0%, #1c1c40 18%, var(--dusk) 28%, #aa5f84 36%, var(--dawn) 41%,
    #1e2a1a 42%, #3a2818 43%, var(--earth) 70%, var(--thick) 85%, #000 100%);
  background-color: var(--night);
}

#scene {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

main {
  position: fixed;
  top: 9vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* The name is drawn as ANSI art by logo.js; the heading stays for screen
   readers and search, and shows in gold if the script does not run. */
h1 {
  margin: 0;
  font: 400 clamp(1.9rem, 8.2vw, 6.5rem)/1.05 Georgia, serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.drawn h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#logo {
  display: block;
}