/* DOS text-mode palette: black, dark grey, light grey, white. */
:root {
  --black: #000000;
  --dark-grey: #555555;
  --light-grey: #aaaaaa;
  --white: #ffffff;
  --link-hover: #529dff; /* from the ripple's rainbow palette (hue 214, sky blue) */
  --mono: "Cascadia Mono", Consolas, "Lucida Console", Menlo, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--black);
  color: var(--light-grey);
  font-family: var(--mono);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1; }

#water {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.fallback {
  margin: 30vh auto 0;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(5px, 1.2vw, 14px);
  line-height: 1;
}

footer {
  position: relative; /* above the canvas */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding: 1.25rem 1rem 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

footer a {
  color: var(--light-grey);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer a:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 3px;
}

/* Text pages (privacy): a readable column in the same DOS palette. */

/* A text page can be taller than the window, so it may get a scrollbar the home page never has.
   Reserving that space on both sides keeps the page centred on the window like the home page, so
   the footer doesn't jump sideways between them. (Not on the home page: its canvas is sized to the
   full window width and would be squeezed.) */
:root:has(.document) {
  scrollbar-gutter: stable both-edges;
}

.document {
  width: 100%;
  max-width: 64ch;
  margin: 0 auto;
  padding: 3rem 1.25rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.document h1 {
  margin: 1.5rem 0 0.25rem;
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--white);
}

.document h2 {
  margin: 1.75rem 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: normal;
  color: var(--white);
}

.document p {
  margin: 0 0 0.75rem;
}

.document .updated {
  font-size: 0.8125rem;
}

.document a {
  color: var(--light-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document a:hover,
.document a:focus-visible {
  color: var(--link-hover);
}

.document .home a {
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}