:root {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/system-color */
  color-scheme: dark light;

  --accent-color: AccentColor;
  --accent-color-text: AccentColorText;
  --active-text: ActiveText;
  --button-border: ButtonBorder;
  --button-face: ButtonFace;
  --button-text: ButtonText;
  --canvas: Canvas;
  --canvas-text: CanvasText;
  --field: Field;
  --field-text: FieldText;
  --gray-text: GrayText;
  --highlight: Highlight;
  --highlight-text: HighlightText;
  --link-text: LinkText;
  --mark: Mark;
  --mark-text: MarkText;
  --selected-item: SelectedItem;
  --selected-item-text: SelectedItemText;
  --visited-text: VisitedText;
}

@media (prefers-color-scheme: dark) {
  --accent-color: #3584e4;
  --accent-color-text: #ffffff;
  --active-text: #ff6666;
  --button-border: #8f8f9d;
  --button-face: #2b2a33;
  --button-text: #fbfbfe;
  --canvas: #1c1b22;
  --canvas-text: #fbfbfe;
  --field: #2b2a33;
  --field-text: #fbfbfe;
  --gray-text: #75747a;
  --highlight: #3584e4;
  --highlight-text: #ffffff;
  --link-text: #8c8cff;
  --mark: #ffff00;
  --mark-text: #000000;
  --selected-item: #15539e;
  --selected-item-text: #ffffff;
  --visited-text: #ffadff;
}

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Niue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-variant-numeric: tabular-nums;
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

h2,
h3,
h4,
h5,
h6 {
  margin-block: 0.67rem;
}

table {
  border-spacing: 0;
}

main {
  margin: 1ch auto;
  max-width: 80ch;

  &.index {
    & > section {
      text-align: center;
    }
  }
}

.handout {
  p {
    margin: 1ch 0;
  }

  table tbody tr:nth-child(odd) {
    background-color: hsl(from var(--canvas) h s calc(l * 1.5));
  }

  th,
  td {
    padding: 0.5ch 0.5ch;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  footer {
    color: var(--gray-text);
    font-size: smaller;
    margin-top: 2ch;
  }
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

body {
  background: var(--canvas);
}

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

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

blockquote {
  background: var(--button-face);
  border-left: 3px solid var(--accent-color);
  border-radius: 0 1ch 1ch 0;
  color: var(--button-text);
  margin-block: 0.5ch;
  padding: 0.5ch;

  .info {
    color: var(--accent-color);
    display: block;
    margin-block-start: -1ch;
    margin-block-end: 1ch;

    &::before {
      content: "ℹ️ ";
    }
  }
}

p {
  img[alt] {
    max-width: 30ch;
  }
}

@media (min-width: 83ch) {
  p {
    &:has(img[alt]) {
      float: right;
    }
  }
}

@media (max-width: 82ch) {
  main {
    margin-inline: 1ch;
  }

  p {
    &:has(img[alt]) {
      display: flex;
      justify-content: center;
    }

    img[alt] {
      max-width: 100%;
    }
  }
}