.rainbow-text {
  font-size: 40px; 
  font-weight: bold;
  background: linear-gradient(90deg, orange, yellow, green, blue, indigo, violet, red, orange, yellow, yellow);
  background-size: 300% 100%; /* Background size adjusted to ensure smooth movement */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveGradient 3.0s linear infinite; /* Slower, smooth transition */
}
h1 {
     color: rgb(88, 255, 11);
     text-align: center;
     font-family: "Comic Sans MS", "Comic Sans", cursive;
     }
h2 {
     color: rgb(255, 30, 0);
     text-align: center;
     font-family: "Comic Sans MS", "Comic Sans", cursive;
     }
h3 {
     color: rgb(219, 247, 65);
     text-align: left;
     font-family: 'Comic Sans MS', fantasy;
     }
h4 {
     color: rgb(236, 168, 219);
     text-align: center;
     font-family: "Comic Sans MS", "Comic Sans", cursive;
     }
p {
     color: rgb(133, 107, 126);
     text-align: center;
     font-size: 20px;
     font-family: 'Comic Sans MS', fantasy;
     }
.flex-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;;
}

.flex-gallery img {
    width: calc(33.33% - 10px);
    height: auto;
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%; /* Start with red in the text */
  }
  100% {
    background-position: 100% 50%; /* End with violet at the other end */
  }
}


body{
    background-color: black;
   }

    body {
  background-image: url("stars.png");
  background-repeat: repeat;
    }
  #shadowBox {
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.2);
    /* Black w/opacity/see-through */
    border: 3px solid;
}

.rainbow {
    text-align: center;
    text-decoration: underline;
    font-size: 32px;
    letter-spacing: 5px;
}
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

.repeated-title {
  background: url("kissapallo.gif") repeat-x;
  height: 250px;   /* match your image height */

}

.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}


@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}