header nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

header nav > :is(a, span) {
  position: absolute;
  top: 11%;
  padding: 0.44em 0.89em;
  transform: translate(-50%, -50%) rotate(-22deg);

  border: 2.5px solid var(--oc-black);
  border-radius: 9999px;
  color: var(--oc-black);
  background-color: var(--oc-white);

  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-subheading);
  text-decoration: none;
  white-space: nowrap;

  transition: color var(--duration-x-fast) linear,
    background-color var(--duration-x-fast) linear;
  pointer-events: auto;
}

header nav > a::after {
  position: absolute;
  inset: calc(-1 * var(--space-xs));
  border-radius: inherit;
  content: "";
}

header nav > :nth-child(1) {
  --section-accent: var(--oc-red-6);

  left: 20%;
}

header nav > :nth-child(2) {
  --section-accent: var(--oc-lime-8);

  left: 73%;
}

header nav > :nth-child(3) {
  --section-accent: var(--oc-violet-6);

  left: 85%;
}

header nav > span,
header nav > a:is(:hover, :focus-visible) {
  color: var(--oc-white);
  background-color: var(--section-accent);
}

/* Breakpoints */

@media (width <= 1024px) {
  header nav > :is(a, span) {
    padding: 0.4em 0.79em;
    border-width: 2px;
  }
}

@media (width <= 768px) {
  header nav {
    position: static;
    inset: auto;
    display: flex;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
  }

  header nav > :nth-child(n) {
    position: relative;
    inset: auto;
    padding: var(--space-s) var(--space-m);
    transform: none;
    flex-shrink: 0;
  }

}