:root {
  --bg: #1e1e2e;
  --fg: #cdd6f4;
  --muted: #a6adc8;
  --link: #89b4fa;
  --bold: #f9e2af;
}

body {
  margin: 0 auto;
  max-width: 40rem;
  background: var(--bg);
  color: var(--fg);
  padding: 1rem;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace;
}

@view-transition {
  navigation: auto;
}

body > header,
main > header {
  view-transition-name: site-header;
}

footer nav {
  view-transition-name: site-elsewhere;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.95em;
}

footer nav a {
  color: var(--muted);
}

footer nav a:hover {
  color: var(--link);
}


a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong,
b {
  color: var(--bold);
}

dt {
  font-weight: bold;
  color: var(--bold);
}

dd {
  margin: 1ex 1rem;
}

h1, h2, h3, h1 a {
  color: var(--bold);
}

h3, h4, h5 {
  color: var(--fg);
}

article {
  line-height: 1.6;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

::selection {
  background: rgba(203,166,247,.35);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% -10%,
      rgba(203,166,247,.08),
      transparent 50%
    );
}