body:has(> nav[data-id=secondary] > ol) nav[data-id=primary] {
  margin-bottom: 0;
}

nav[data-id=primary] [data-id=toggle-theme] span {
  display: none;
}

:root[data-theme=one-dark] nav[data-id=primary] [data-id=toggle-theme] span[data-value=one-dark] {
  display: initial;
}

:root[data-theme=sepia] nav[data-id=primary] [data-id=toggle-theme] span[data-value=sepia] {
  display: initial;
}

:root[data-theme=light] nav[data-id=primary] [data-id=toggle-theme] span[data-value=light] {
  display: initial;
}

@keyframes theme-attention {
  0%, 100% {
    rotate: 0;
  }
  10% {
    rotate: 30deg;
  }
  20% {
    rotate: -25deg;
  }
  30% {
    rotate: 20deg;
  }
  40% {
    rotate: -15deg;
  }
  50% {
    rotate: 10deg;
  }
  60% {
    rotate: -5deg;
  }
  70% {
    rotate: 5deg;
  }
  80% {
    rotate: -5deg;
  }
}
nav[data-id=primary] > h1 {
  font-family: var(--font-main-nav-logo);
}
@layer media-large {
  nav[data-id=primary] {
    --grid-template-single-line: "title . . settings";
    --grid-template-multi-line: "title . settings" "sections . social";
    display: grid;
    align-items: center;
    justify-content: start;
    gap: 0.8rem;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: var(--grid-template-multi-line);
    position: sticky;
    top: 0;
    z-index: 1;
    min-width: 285px;
    box-sizing: border-box;
    margin: 4rem 0 50px 0;
    padding-inline: var(--letterboxed);
    padding-block: 1rem;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 1s, padding-block 0.5s, background-color 0.75s;
  }
  nav[data-id=primary] [data-id=toggle-nav] span[data-value=on] {
    display: none;
  }
  nav[data-id=primary] [data-id=toggle-nav] span[data-value=off] {
    display: initial;
  }
  nav[data-id=primary] [data-id=toggle-theme].animated {
    animation: theme-attention 1s ease-out 0s 1 alternate;
  }
  nav[data-id=primary].single-line {
    grid-template-areas: var(--grid-template-single-line);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  nav[data-id=primary].single-line > [data-id=social], nav[data-id=primary].single-line > [data-id=pages] {
    display: none;
  }
  nav[data-id=primary].single-line [data-id=toggle-nav] span[data-value=on] {
    display: initial;
  }
  nav[data-id=primary].single-line [data-id=toggle-nav] span[data-value=off] {
    display: none;
  }
  nav[data-id=primary].stuck {
    box-shadow: 0px 5px 8px -3px rgba(12, 12, 12, 0.15);
  }
  nav[data-id=primary] > h1 {
    grid-area: title;
    margin: 0;
    text-transform: uppercase;
    font-weight: 400;
  }
  nav[data-id=primary] > h1 a {
    color: var(--color);
  }
  nav[data-id=primary] > [data-id=pages] {
    grid-area: sections;
  }
  nav[data-id=primary] > [data-id=pages] li a {
    display: inline-block;
  }
  nav[data-id=primary] > [data-id=pages][data-key-combo=g] li a::first-letter {
    text-decoration: underline;
  }
  nav[data-id=primary] > [data-id=social] {
    grid-area: social;
    justify-self: end;
  }
  nav[data-id=primary] > [data-id=controls] {
    grid-area: settings;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: end;
    gap: 6px;
    user-select: none;
  }
  nav[data-id=primary] > [data-id=controls] > li {
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 2rem;
    font-variation-settings: "FILL" 0, "wght" 0, "GRAD" 0, "opsz" 0;
    --toggle-theme-shadow-size: 0px;
    filter: drop-shadow(0px 0px var(--toggle-theme-shadow-size) var(--color));
    transition: filter 0.5s ease-out;
  }
  nav[data-id=primary] > [data-id=controls] > li:hover {
    --toggle-theme-shadow-size: 5px;
  }
}
@layer media-small {
  @media (max-width: 700px) {
    nav[data-id=primary] {
      --grid-template-multi-line:
              "title . settings"
              "sections sections sections";
    }
    nav[data-id=primary] > [data-id=social] {
      display: none;
    }
  }
}