:root {
  color-scheme: light dark;
  --fg: light-dark(#111, #ddd);
  --bg: light-dark(#fff, #111);
  --muted: light-dark(#767676, #8a8a8a);
}

html {
  font-family: system-ui, sans-serif;
  font-feature-settings: "palt";
  line-height: 1.8;
  line-break: strict;
  text-spacing-trim: trim-start;
  hanging-punctuation: allow-end;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 34rem;
  margin: 0 auto;
  padding: 15vh 1.5rem 8rem;
}

h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

ul {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--muted);
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.2em;
}