:root {
  --ff-serif: ui-serif, serif;
  --ff-sans: ui-sans-serif, sans-serif;
  --ff-mono: ui-monospace, monospace;
  --ff-icons: "glyphicons", emoji;

  --color-background: white;
  --color-foreground: contrast-color(var(--color-background));
  --color-foreground: black;
  --color-link: oklch(0.4539 0.0946 153.93);
  --color-visited: color-mix(in oklch, var(--color-link), black);
  --color-active: oklch(0.4564 0.1835 20.81);
  --color-mute: oklch(0.46 0 0);
  --color-light: oklch(0.66 0 0);
  --color-dark: oklch(0.47 0 0);

  --size-13: 7.4375rem;
  --size-12: 5.5625rem;
  --size-11: 4.1875;
  --size-10: 3.125;
  --size-9: 2.3125;
  --size-8: 1.75;
  --size-7: 1.5;
  --size-6: 1.3125rem;
  --size-5: 1.15625rem;
  --size-4: 1;
  --size-3: 0.75;
  --size-2: 0.5625;
  --size-1: 0.4375;
  --size-0: 0.3125;
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  margin: calc(var(--size-4) * 1em) auto;
  max-width: 80ch;
  font-family: var(--ff-sans);
  padding: 0 calc(var(--size-2) * 1em) calc(var(--size-10) * 1em);
}

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

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

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

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: black;
    --color-foreground: white;
    --color-link: oklch(0.7223 0.1514 143.16);
    --color-visited: color-mix(in oklch, var(--color-link), white);
    --color-active: oklch(0.6923 0.1759 37.7);
    --color-mute: oklch(0.67 0 0);
    --color-dark: oklch(0.66 0 0);
    --color-light: oklch(0.47 0 0);
  }
}

@media print {
  body {
    max-width: none;
    font-family: var(--ff-serif);
  }
}

[lang="pt-PT"] * {
  hyphens: auto;
}

[lang]:not([lang="pt-PT"]) * {
  hyphens: initial;
}

.emoji {
  font-family: var(--ff-icons);
}

[title] {
  border-bottom: thin dashed;
}

h1 {
  text-align: center;
  font-size: calc(var(--size-9) * 1rem);
  font-weight: 800;
}
h1, h2, h3 {
  scroll-margin: calc(var(--size-12) * 1rem);
}

.lead {
  font-size: calc(var(--size-6) * 1rem);
}

.small {
  font-size: calc(var(--size-3) * 1rem);
  font-weight: 500;
}

.mute {
  color: var(--color-mute);
  font-size: calc(var(--size-3) * 1rem);
}

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

dt::after {
  content: ":";
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-rows: auto;
  gap: calc(var(--size-0) * 1em) calc(var(--size-3) * 1em);
  align-items: start;
}

dl dt,
dl dd {
  margin: 0;
  word-break: break-word;
}

dl dt {
  grid-column: 1;
}

dl dd {
  grid-column: 2;
}

dl.divider {
  gap: 0;
}
dl.divider dl {
  gap: 0;
}
dl.divider dt {
  padding-inline-end: calc(var(--size-4) * 1em);
}
dl.divider dt + dd:not(:first-of-type) {
  border-block-start: 1px solid var(--color-dark);
}
dl.divide dd + dt {
  border-block-start: 1px solid var(--color-dark);
}