html {
  font: var(--font-default);
  color: var(--color-primary);
  background: var(--background-page);
  min-height: 100%;
}

body > #grid {
  & input[type=radio],
  & input[type=checkbox] {
    accent-color: var(--color-active);
  }

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

  & a:active,
  & input[type=submit]:active,
  & input[type=button]:active,
  & button:active,
  & *:focus {
    outline: var(--size-tiny) var(--color-active) solid;
    outline-offset: var(--size-tiny);
  }

  > header > h1 {
    font: var(--font-heading);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: .25ex;
    text-decoration-thickness: .25ex;
  }

  > header > h1 {
    font-size: max(var(--size-large), 4vw);
  }

  > menu {
    display: flex;
    gap: var(--common-gap);
    flex-wrap: wrap;
    align-items: baseline;

    > li {
      list-style: none;
    }
  }

  > main {
    > h2 {
      font-size: xx-large;
    }

    > h1,
    > h2,
    > h3 {
      > strong {
        background: var(--background-lead-accent);
        background-clip: text;
        color: transparent;
        font: var(--font-lead-accent);
      }
    }

    > h3 {
      font-size: x-large;
      color: var(--color-lead);

      > a {
        color: inherit;
      }
    }
  }

  & details > summary {
    color: var(--color-link);
  }

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

  & a:hover,
  & *:not(main) a:visited:hover,
  & details > summary:hover {
    &, &:before {
      color: var(--color-active);
    }
  }

  > *:not(main) a:visited {
    color: var(--color-link);
  }
}