.attention-grabber {
    animation: sizechange 0.7s infinite;
    animation-delay: 6.9s;
  }
  
  @keyframes sizechange {
    from {
      font-size: 12px;
    }
    to {
      font-size: 13px;
    }
  }

/* POPups */
.popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
  /* center and  text */
  text-align: center;
  /* allign sub objects vertically*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(12px); /* Optional: subtle blur for more effect */
}






/* Rainbow-Text für Navbar und Hover-Effekt */
.nav-link, .navbar-brand .paragraph {
  background: linear-gradient(90deg,#ff00cc,#ffcc00,#33cc33,#0099ff,#6633ff,#ff00cc,#ff00cc);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.7s;
}
.nav-link:hover, .navbar-brand .paragraph:hover .section:hover {
  background-position: 100% 50%;
  animation: rainbowText 1.5s linear infinite;
}
@keyframes rainbowText {
  0% {background-position:0% 50%;}
  100% {background-position:100% 50%;}
}


/* Add this to your CSS file or inside a <style> tag in your HTML */
.button-primary.attention-grabber {
  background: linear-gradient(270deg, #ff0080, #ff8c00, #40e0d0, #8a2be2, #ff0080);
  background-size: 400% 400%;
  color: #fff;
  transition: transform 0.2s ease;
}

.button-primary.attention-grabber:hover {
  animation: rainbow 1.5s linear infinite;
  transform: scale(1.08);
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}