@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 7.5s linear infinite;
  white-space: nowrap;
}

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

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deal {
  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 */
  }
}