:root {
  font-size: 112.5%; /* 18px */
  font-family: Helvetica, "Nimbus Sans", "Liberation Sans", Arial, sans-serif;
  --background-color: hsl(0, 0%, 100%);
  @media (prefers-color-scheme: dark) {
    --background-color: hsl(249, 11%, 12%);
  }
}
body {
  max-width: fit-content;
  margin: auto;
  padding-inline: 1rem;
  background-color: var(--background-color);
}
header {
  border-block-end: 1px solid;
}
.site-title-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-block: 1rlh;
  flex-shrink: 0;
  text-decoration: none;
  color: CanvasText;
  & .site-logo {
    width: 3rem;
    height: auto;
  }
  & .site-title {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    &:hover {
      text-decoration: underline;
    }
  }
}

/* Shrink heading when the viewport is narrow */
@media (max-width: 25em) {
  .site-title-container {
    & .site-logo {
      width: 13vw;
    }
    & .site-title {
      font-size: 13vw;
    }
  }
}
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  & li + li::before {
    content: "→";
    margin-inline: 0.5rem;
  }
  & a:visited {
    color: LinkText;
  }
}
h1 {
  text-transform: uppercase;
  margin-block: 0.67em;
  font-size: 1.8em;
}
nav section h2 {
  margin: 0;
  border-block-end: 1px solid;
  a {
    color: CanvasText;
    text-decoration: none;
  }
}

nav.toc {
  & ul {
    padding-inline-start: 1rem;
  }
  & li {
    margin-block: 0.5rlh;
  }
}