body {
  background-image: url("./public/background.jpg");
  background-size: cover; /* Ensure image fits properly */
  background-repeat: no-repeat;
  background-position: center;
  overflow-y: hidden;
  overflow-x: hidden;
  min-width: 100%;
  min-height: 110vh;
  margin: 0;
  background-color: #ff1493;
}

/* Basic style for the raindrop divs */
.raindrop {
  position: absolute;
  top: -50px; /* Start above the viewport */
  width: 100px;
  height: 100px;
  background-size: contain; /* Ensure image fits properly */
  background-repeat: no-repeat;
  border-radius: 50%;
  /* Use the CSS animation defined below */
  animation: fall linear;
}

.raindrop-1 {
  background-image: url("./public/ni-flower-1.png");
}

.raindrop-2 {
  background-image: url("./public/ni-flower-2.png");
}

.raindrop-3 {
  background-image: url("./public/ni-flower-3.png");
}

.raindrop-4 {
  background-image: url("./public/ni-flower-4.png");
}

/* Keyframes for the falling animation */
@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Translate the element down beyond the bottom of the viewport */
    transform: translateY(110vh);
  }
}

.shimmer-text {
  /* Base text style */
  font-size: 3rem;
  font-weight: bold;

  /* Create gradient text */
  background: linear-gradient(
    90deg,
    #ff69b4 0%,
    #ff1493 25%,
    #ffc0cb 50%,
    #ff69b4 75%,
    #ff1493 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  /* Animation */
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

.cookie-regular {
  font-family: "Cookie", serif;
  font-weight: 400;
  font-style: normal;
}

.title-text {
  font-size: 100px;
  /* Centering styles */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.title-background {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 90vh;
  text-align: center;
  flex-direction: column;
  flex-wrap: nowrap;
}