#site-nav {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: var(--nav-bg);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0px 12px 24px -16px rgba(0, 0, 0, 0.5);
  margin: 1rem auto;
  position: sticky;
  top: 1rem;
  width: min(calc(var(--content-width) + 10rem), 90%);
  z-index: 1;

  @media screen and (max-width: 480px) {
    & {
      position: static;
    }
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;

    @media screen and (max-width: 630px) {
      & {
        justify-content: center;
      }
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      justify-content: center;
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      display: inline-flex;
    }

    a {
      border-radius: 999px;
      color: var(--fg-muted-4);
      font-weight: 400;
      padding: 0.325rem 0.75rem;
      text-decoration: none;
      transition: var(--transition);

      &:hover {
        background-color: var(--fg-muted-1);
        color: var(--primary-color);
        text-decoration: none;
      }

      &:active {
        transform: scale(var(--active));
      }
    }
  }
}