:root {
  --font-family-sans-serif: system-ui, sans-serif;
  --font-family-monospace: ui-monospace, "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --padding-body: 1rem;
  --color-text: #0b0c0c;
  --color-background: #ffffff;
  --color-link: #1d70b8;
  --color-link-visited: #4c2c92;
  --color-link-focus: #003078;
  --color-link-focus-underline: var(--color-link-focus);
  --color-link-active: #0b0c0c;
  --color-focus: #ffdd00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ffffff;
    --color-background: #121212;
    --color-link: rgb(138, 200, 255);
    --color-link-visited: rgb(195, 167, 255);
    --color-link-focus-underline: rgb(133, 123, 64);
    --color-link-active: #0b0c0c;
  }
}

html,
body {
  font-size: 18px;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--font-family-sans-serif);
  line-height: 1.8rem;

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

a:link {
  color: var(--color-link);
  text-underline-offset: 0.25rem;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover,
a:focus {
  color: var(--color-link-focus);
  text-decoration-color: var(--color-link-focus-underline);
  text-decoration-thickness: 0.2rem;
  text-decoration-skip-ink: none;
}

a:focus {
  background-color: var(--color-focus);
  outline: none;
}

a:active {
  color: var(--color-link-active);
}

h1 {
  font-size: 1.2rem;
  line-height: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.2rem solid currentcolor;
}

code {
  font-family: var(--font-family-monospace);
}

main {
  padding: var(--padding-body);
  max-width: 80ch;
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
}