@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;800;900&display=swap");

body {
  background-color: rgb(138, 0, 251);
  font-family: "Rubik", sans-serif;
}

.marquee {
  animation: marquee 8s linear infinite;
  white-space: nowrap;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

h1 {
  font-weight: 800;
  font-size: 50px;
  margin-top: 10px;
  background: linear-gradient(
    to bottom,
    #ffffff,
    #989998
  ); /* Change colors as needed */
  -webkit-background-clip: text; /* Set the background-clip property */
  background-clip: text;
  color: transparent; /* Make the text transparent */
}

.images-container {
  display: flex;
  justify-content: space-between; /* Align images with space between them */
  margin-top: 20px; /* Adjust margin as needed */
}

.image-wrapper {
  flex: 0 0 25%; /* Adjust the width of each image wrapper */
}

.image-wrapper img {
  width: 100%;
  height: auto;
}

.image-wrapper .caption {
  margin-top: 15px; /* Adjust margin as needed */
  font-size: 25px;
  font-weight: bold;
  font-family: Rubik, sans-serif;
  color: #07b2fb;
  animation: pop-up 1s ease infinite alternate; /* Apply the pop-up animation */
}

@keyframes pop-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px); /* Adjust the distance the text pops up */
  }
}