.navigation-bar {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  top: 15px;
  left: 0;
  right: 0;
}

.nav-button, .hamburger-button, .mobile-nav-button {
  background-color: rgba(215, 243, 169, 0.8);
  backdrop-filter: blur(var(--secondary-translucence));
  border: 0.1875rem solid #0C3D35;
  border-radius: 0.5rem 1.25rem;
}

.nav-button {
  width: 150px;
  height: 50px;
  margin: 0px;
}
.nav-button:active {
  background-color: rgba(127, 145, 98, 0.8);
}
@media (min-width: 1025px) {
  .nav-button:hover {
    cursor: pointer;
    background-color: rgba(127, 145, 98, 0.8);
  }
}

.hamburger-button {
  position: fixed;
  z-index: 10;
  top: 1.5rem;
  right: 1.5rem;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 5rem;
  height: 5rem;
  padding: 0.9rem;
}
.hamburger-button:active {
  background-color: rgba(127, 145, 98, 0.8);
}

.hamburger-button span {
  width: 100%;
  height: 0.3rem;
  border-radius: 100px;
  background-color: rgb(24, 37, 23);
}

.hamburger-menu {
  position: fixed;
  z-index: 10;
  top: 100px;
  right: -100%;
  width: 13rem;
  display: none;
  flex-direction: column;
  gap: 1rem;
  transition: 0.2s ease-in-out;
}
.hamburger-menu.active {
  right: 0px;
}

.mobile-nav-button {
  border-radius: 0.5rem 0rem 0rem 1.25rem;
  border-right: none;
  height: 4rem;
}
.mobile-nav-button:active {
  background-color: rgba(127, 145, 98, 0.8);
}

@media (max-width: 725px) {
  .navigation-bar {
    display: none;
  }

  .hamburger-button {
    display: flex;
  }

  .hamburger-menu {
    display: flex;
  }
}