body {
  & > header {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: black;
    color: white;

    a {
      flex: 0 1 0;
      font-size: 2rem;
      line-height: 2rem;
    }
    nav {
      flex: 1 1;
      display: flex;
      justify-content: center;

      & > label {
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        border: 0.25rem solid black;
        cursor: pointer;

        input[type="radio"] {
          position: absolute;
          opacity: 0;
        }

        &:has(input:checked) {
          background-color: white;
          color: black;
        }

        &:has(input:focus),
        &:hover {
          border-color: gray;
        }
      }
    }
  }

  & > main {
    height: 90vh;

    & > section {
      display: none;
      border: 2px dashed currentColor;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      color: black;
    }

    section.white {
      background-color: white;
    }
    section.red {
      background-color: crimson;
    }
    section.green {
      background-color: lightgreen;
    }
    section.blue {
      background-color: aqua;
    }
    section.black {
      color: white;
      background-color: black;
    }
  }

  &:has(header nav input[name="bg"][value="white"]:checked) section.white {
    display: flex;
  }
  &:has(header nav input[name="bg"][value="red"]:checked) section.red {
    display: flex;
  }
  &:has(header nav input[name="bg"][value="green"]:checked) section.green {
    display: flex;
  }
  &:has(header nav input[name="bg"][value="blue"]:checked) section.blue {
    display: flex;
  }
  &:has(header nav input[name="bg"][value="black"]:checked) section.black {
    display: flex;
  }
}