:root {
  --bg: #f7f6f2;
  --fg: #111;
  --muted: #8a8780;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #0e0e0d; --fg: #ecebe6; --muted: #6f6d67; }
}

* { box-sizing: border-box; margin: 0; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 "EB Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

main { width: min(100%, 420px); }

h1 { font-size: inherit; font-weight: 400; }
p { color: var(--muted); }

nav { display: flex; gap: 24px; margin-top: 32px; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
a:hover { text-decoration-color: var(--fg); }

.picture { padding: 0; }
.picture img { max-width: 100vw; max-height: 100svh; display: block; }

.sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; }