html {
  font: var(--font-default);
  color: var(--color-primary);
  background-color: var(--color-background);
}

body > #grid {
  & input[type=radio],
  & input[type=checkbox] {
    accent-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);
  }

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

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

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

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

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

  & input[type=radio] {
    border-radius: 50%;
    display: block;
  }

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

    > li {
      list-style: none;
    }
  }

  > main {
    > h2 {
      font: var(--font-heading);
      font-size: x-large;
    }
  }
}