* { box-sizing: border-box; }

html {
  background: var(--night);
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--on-bg);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* The sky and the light falling from above it. Fixed layers rather than a
   fixed background, which iOS ignores. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(90% 55% at 50% -6%, rgba(255, 227, 160, 0.42) 0%, rgba(255, 227, 160, 0) 60%),
    radial-gradient(150% 95% at 50% 0%, var(--royal-light) 0%, var(--royal) 34%, var(--bg) 66%, var(--night) 100%);
}
body::after {
  background: repeating-conic-gradient(from 0deg at 50% -14%,
    rgba(255, 236, 190, 0.075) 0deg 2.6deg, rgba(255, 236, 190, 0) 2.6deg 10deg);
  -webkit-mask-image: radial-gradient(85% 62% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(85% 62% at 50% 0%, #000 0%, transparent 78%);
}

#app { position: relative; z-index: 1; }

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

[hidden] { display: none !important; }

img { max-width: 100%; }