#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;
  max-width: min(calc(var(--content-width) + 10rem), 90%);
  z-index: 1;

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

    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);
      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));
      }
    }

    #home {
      position: relative;
      margin-right: 10px;

      &::after {
        background-color: var(--fg-muted-2);
        content: "";
        height: 110%;
        position: absolute;
        right: -.5rem;
        top: 0;
        width: 1px;
      }

      a {
        font-weight: 800;
        color: var(--fg-muted-5);

        &:hover {
          color: var(--primary-color);
        }
      }
    }

    #feed a {
      padding: 0.325rem 0.625rem;

      svg {
        vertical-align: -0.125em;
      }
    }
  }
}