body {
  padding: 1rem;
  max-width: 80ch;
  margin: auto;
}

header {
  display: block flex;
  place-content: space-between;
  background: var(--col-content-bg);
  border: var(--border-solid);
  padding: 0.25rem;
  margin-block-end: 1rem;
  box-shadow: var(--shadow-overlay);

  font-family: var(--font-family-mono);

  h1 {
    font: inherit;
    font-weight: bold;
  }

  .page-path {
    padding: 0;
    list-style: none;
    display: block flex;

    & li {
      display: inline flex;

      &:not(:last-child) {
        &::after {
          content: "/";
        }
      }
    }
  }
}

article {
  padding: 0.5rem;
  background: var(--col-content-bg);
  border: var(--border-solid);
  box-shadow: var(--shadow-overlay);

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0.5em;

    &:first-child {
      margin-block-start: 0;
    }
  }
}

footer {
  margin-block-start: 1rem;
  margin-inline: auto;
  width: fit-content;
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: small;
  color: var(--col-muted);

  &>img {
    image-rendering: pixelated;
    height: 2rem;
    margin-block-start: 0.25rem;
    margin-inline: auto;
  }
}