:root {
  --fuckboy-teal: #28929f;
  --fuckboy-teal-light: #e4edee;
  --spacing-unit: 5px;

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

  margin: 0;
  padding: 0;
}

@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);
}

body {
  margin: 0;
  padding: calc(3 * var(--spacing-unit));
  max-width: 750px;

  /*
      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);
}

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

header,
footer {
  margin: 0;
  padding: calc(3 * var(--spacing-unit));

  background-color: var(--theme-background-alt);
  color: var(--theme-color);
  border-radius: calc(2 * var(--spacing-unit));
  border: 1px solid var(--theme-color-alt);

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

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

header {
  margin-bottom: calc(6 * var(--spacing-unit));
}

footer {
  margin-top: calc(6 * var(--spacing-unit));
}

h1 {
  font-size: 1.25rem;
  font-weight: 650;
  margin: calc(6 * var(--spacing-unit)) 0 0 0;

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

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

/* Applied to post headings after scrolling far down in the index when contents
are hidden and you just get the title/link */
.reduced-margin-top {
  margin-top: var(--spacing-unit);
}

p,
figure {
  margin: calc(2 * var(--spacing-unit)) 0;
  padding: 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;
}