:root {
  --color-base: #fafafa;
  --color-primary: #000000;
  --color-focus: hsl(48 98% 58%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-base: #121212;
    --color-primary: #ffffff;
    --color-focus: hsl(42 95% 59%);
  }
}

html {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 20px 32px;

  color: var(--color-primary);
  font-family: Helvetica, sans-serif;
  line-height: 1.4;

  background-color: var(--color-base);
}

main {
  max-width: 600px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
body,
section,
ul,
ol,
li {
  box-sizing: border-box;
}

h1,
h2,
h3 {
  margin-bottom: 0;
}

p {
  margin-block: 8px;
}

h1 + p,
h2 + p,
h3 + p,
h1 + ul,
h2 + ul,
h3 + ul,
h1 + ol,
h2 + ol,
h3 + ol {
  margin-top: 2px;
}

a {
  color: currentColor;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
  transition: text-decoration-color 0.2s ease-in-out;
  text-underline-offset: 4px;
}
a:hover {
  text-decoration-color: currentColor;
  transition: none;
}

::selection {
  color: #000000;

  background-color: var(--color-focus);
}

footer {
  margin-top: 40px;
  color: color-mix(in oklab, currentColor 50%, transparent);
  font-size: smaller;
}