/* Initial state of the navbar before any animation */
#navbar {
  position: fixed;
  top: 0.5%; /* Start off-screen */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Offset by half of the navbar's width */
  width: 80%;
  text-align: center;
  z-index: 100;
  border-radius: 240px;
  opacity: 1; /* Start fully transparent */
  transition: top 0.4s ease, opacity 0.3s ease; /* Transition for scrolling */
  font-size: calc(0.6vw + 0.6vh);
}

/* Animation that runs when the page loads */
@keyframes slideDown {
  from {
    top: -50px;
    opacity: 0;
  }
  to {
    top: 24px;
    opacity: 1;
  }
}

#navbar.fade-in {
  animation: fadeInSlideDown 0.7s ease forwards;
}

#navbar a {
  display: inline-block; /* Changed from block to inline-block for centering */
  margin: 0 -3px; /* Add some space between buttons */
  color: #f3f2f2b0; /* Text color */
  padding: 14px 28px; /* Padding inside the buttons */
  text-decoration: none; /* No underline on links */
  transition: background-color 0.2s, color 0.2s, transform 0.3s ease; /* Smooth transition for hover effect */
}

#navbar a:hover {
  background-color: rgb(255, 210, 11);
  color: black; /* Text color on hover and click */
  transform: scale(1); /* Enlarges the button */
}

#navbar a:active {
  background-color: rgb(111, 26, 172);
  color: black; /* Text color on hover and click */
  transform: scale(1); /* Enlarges the button */
}

#navbar a.nav-link {
  position: relative; /* Establishes a positioning context for pseudo-elements */
}

/* Common styles for all ::after elements */
#navbar a.nav-link::after {
  display: block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  top: 120%;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s; /* This will be overridden by animation on hover */
  pointer-events: none;
  z-index: 101; /* Above other content */
}

.vertical-line-hamburger {
  border: none;
  height: 7.5%;
  position: fixed;
  background-color: #1f1f1f;
  width: 1px;
  top: -2vh;
  margin-left: 96%;
  z-index: 6;
}

.horizontal-line {
  border: none;
  height: 7.5%;
  position: fixed;
  background-color: #080808;
  width: 100%;
  top: -2vh;
  z-index: 4;
}

.horizontal-line-thin {
  border: none;
  height: 1px;
  position: fixed;
  background-color: #212121;
  width: 100%;
  top: 5.5%;
  z-index: 5;
}

.nav-background {
  border: none;
  height: 7.5%;
  position: fixed;
  background-color: #000000;
  width: 100%;
  top: -2vh;
  z-index: 4;
}