.sentinel-nav-trigger {
  height: 1px;
  visibility: hidden;
}
.navbar-placeholder {
  visibility: hidden;
}

.navbar {
  border: 1px solid #333;
  border-radius: 99px;
  position: relative;
  z-index: 999;
  overflow: hidden;
}

.navlist {
  background: #111111;
  list-style: none;
  display: flex;
  align-items: center;
  padding: 4px;

  .nav-link {
    position: relative;

    a {
      text-decoration: none;
      display: inline-block;
      color: #888888;
      background: transparent;
      border: none;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      border-radius: inherit;
      z-index: 10;
      position: relative;

      @media only screen and (max-width: 768px) {
        padding: 10px 14px;
      }

      &:has(+ .active-link),
      &:hover {
        color: #fff;
        text-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
      }
    }

    .active-link {
      display: inline-block;
      background: rgba(255, 255, 255, 0.08);
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      border-radius: 99px;
      z-index: 2;
    }

    .active-link:before {
      position: absolute;
      content: "";
      inset: 0;
      background: #aeaeae8a;
      border-radius: inherit;
      filter: blur(32px);
      z-index: 0;
      transform: translateZ(0);
    }
  }
}
