body {
  background: linear-gradient(0deg, #0f0f0f 30%, #282828);
  background-repeat: no-repeat;
  color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  font-family: "Signika", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "GRAD" 0;
}

.App {
  text-align: center;
}

.App-header {
  background: black;
  padding: 10px 0;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid #333;
}

nav {
  position: relative;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Rubik+Burned&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Microbe&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
.nav-link {
  text-decoration: none;
  color: #b0b0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 50px;
  position: relative;
  font-size: 1em;
  font-family: "Signika", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "GRAD" 0;
  font-weight: 600;
  padding: 0 15px;
  transition: color 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
}

.nav-link-menue {
  text-decoration: none;
  color: #b0b0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 11px 10px;
  transition: color 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
}

.nav-link-menue.active {
  color: #ffffff;
}

.nav-link-menue:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.nav-link.active {
  color: #ffffff;
}

.nav-link:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  transition: width 0.3s ease, left 0.3s ease;
}

.active-underline {
  background-color: #e88f36; /* Warm orange underline for active route */
}

.hover-underline {
  background-color: #007bc7; /* Bright blue underline for hover effect */
}

sup {
  vertical-align: super;
  font-size: smaller;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px #3353ff, 0 0 10px #33bcff, 0 0 15px #33ffbc,
      0 0 20px #001cff, 0 0 30px #00ff64, 0 0 40px #33ccbe, 0 0 50px #337dcc,
      0 0 75px #3384cc;
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow: 0 0 3px #ff3, 0 0 7px #ff3, 0 0 10px #ff3, 0 0 15px #f90,
      0 0 20px #f90, 0 0 30px #c33, 0 0 40px #c33, 0 0 60px #c33;
  }
  22%, 53% {
    opacity: 0.5;
    text-shadow: 0 0 2px #ff3, 0 0 5px #ff3, 0 0 7px #ff3, 0 0 10px #f90,
      0 0 15px #f90, 0 0 20px #c33, 0 0 30px #c33, 0 0 45px #c33;
  }
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
  .nav-link {
    width: 70px;
    padding: 10px;
  }
}