brk/website/header/style.css

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

    > a {
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 0.625rem;
      color: white;
      text-decoration: none;
      text-transform: lowercase;

      &:hover,
      &:active {
        color: var(--orange);
      }

      .cube {
        --size: 1rem;
        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);
          }
        }
      }
    }
  }
}