:root {
  --fuckboy-teal: #28929f;
  --fuckboy-teal-light: #e4edee;
  --spacing-unit: 5px;
  --bite: calc(3 * var(--spacing-unit));
  --chonk: calc(10 * var(--spacing-unit));
  --body-max-width: 751px;

  --theme-background: white;
  --theme-color: black;
  --theme-background-alt: var(--fuckboy-teal-light);
  --theme-color-alt: var(--fuckboy-teal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme-background: black;
    --theme-color: white;
    --theme-background-alt: var(--fuckboy-teal);
    --theme-color-alt: var(--fuckboy-teal-light);
  }
}

[data-theme="dark"] {
  /* TODO: This needs to match the above exactly. Figure out how to DRY */
  --theme-background: black;
  --theme-color: white;
  --theme-background-alt: var(--fuckboy-teal);
  --theme-color-alt: var(--fuckboy-teal-light);
}

[data-theme="dark"] {
  /* TODO: This needs to match the above exactly. Figure out how to DRY */
  --theme-background: black;
  --theme-color: white;
  --theme-background-alt: var(--fuckboy-teal);
  --theme-color-alt: var(--fuckboy-teal-light);
}

body {
  padding: var(--chonk) 0;

  /*
      Ancizar Sans, then the Classical Humanist stack from
      https://github.com/system-fonts/modern-font-stacks
    */
  font-family:
    "Ancizar Sans", Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  color: var(--theme-color);

  background: var(--theme-background);
}

.vertical-rhythm-slender {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vertical-rhythm-chonk {
  display: flex;
  flex-direction: column;
  gap: var(--chonk);
}

.wrapper {
  max-width: var(--body-max-width);
  margin: 0 var(--chonk);
}

.stripe {
  background-color: var(--theme-background-alt);
  color: var(--theme-color);

  border-top: 1px solid var(--theme-color-alt);
  border-bottom: 1px solid var(--theme-color-alt);

  padding: var(--chonk) 0;
}

* {
  & > h1:first-child,
  & > p:first-child,
  & > figure:first-child {
    margin-top: 0;
  }

  & > h1:last-child,
  & > p:last-child,
  & > figure:last-child {
    margin-bottom: 0;
  }
}

a,
a:visited,
a:active,
a:hover {
  color: var(--theme-color-alt);
}

h1 {
  font-size: 1.25rem;
  font-weight: 650;

  a,
  a:visited,
  a:active {
    text-decoration: none;
    color: inherit;
  }

  a:hover {
    text-decoration: underline;
    color: inherit;
  }
}

p,
figure {
  margin: 0.5rem 0;

  /*
   * uhh re-zero out the margin if directly under a flex container that's using
   * gap to accomplish this instead
   */
  .vertical-rhythm-slender > & {
    margin: 0;
  }
}

figure {
  max-width: 100%;

  img {
    max-width: 100%;
  }
}

blockquote {
  margin: 0 0 0 calc(2 * var(--spacing-unit));
  padding: 0 0 0 calc(2 * var(--spacing-unit));
  border-left: 1px dashed var(--theme-color-alt);
}

figure {
  text-align: center;
}

hr {
  border: none;
  border-top: 1px dashed var(--theme-color-alt);
  max-width: 450px;
  margin: calc(6 * var(--spacing-unit)) auto;
}

pre {
  padding: calc(2 * var(--spacing-unit));
  overflow-x: auto;
}

.small {
  font-size: smaller;
}