body {
  > header {
    position: fixed;
    inset: 1.5rem 2rem auto;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: var(--font-size-sm);
    line-height: 1;
    text-transform: uppercase;

    > a {
      --color: var(--white);
      opacity: 0.8;

      justify-self: start;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--color);
      font-size: var(--font-size-base);
      text-decoration: none;
      text-transform: lowercase;

      &:hover {
        opacity: 1;
      }

      &:active {
        opacity: 1;
        --color: var(--orange);
      }

      > span {
        display: inline-grid;
        padding: 0.2rem 0.3rem;
        color: var(--black);
        background-color: var(--color);
        border-radius: 0.25rem;
      }

      .cube {
        --size: 0.75rem;
        animation: cube-fill 5s linear infinite alternate;
      }
    }

    > nav {
      font-size: var(--font-size-xs);

      ul {
        display: flex;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      a {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 0.3125rem;
        text-decoration: none;

        color: var(--white);
        background: var(--dark-gray);

        &:hover {
          background: var(--gray);
        }

        &:active {
          background: var(--orange);
        }

        &[aria-current="page"] {
          color: var(--black);
          background: var(--dark-white);

          &:hover {
            background: var(--white);
          }
        }
      }
    }
  }
}