.nav-button {
  position: relative;
  display: inline-block;
  background-color: #000; /* black inside */
  color: #fff;
  padding: 12px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  z-index: 1;
  overflow: visible;
  transition: color 0.3s ease;
  border: 2px solid transparent; /* to keep space for border */
}

.nav-button {
  background-color: #000; /* Black button */
  color: #fff;
  padding: 12px 30px;
  border: 2px solid #fff; /* White border */
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover effect: invert colors */
.nav-button:hover {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}


@keyframes rainbow {
  to {
    transform: rotate(360deg);
  }
}