User:Midtv22342/EmojiRain.css

/* Petal styles */
.petal {
  color: #ff69b4; /* Light pink color */
  font-size: 1.5em; /* Slightly larger to represent petals */
  font-family: 'Arial', sans-serif;
  text-shadow: 0 0 5px #000; /* Optional, can remove if not needed */
  transform: rotate(0deg); /* Optional, can add rotation effect */
}

/* Falling animation for petals */
@keyframes petals-fall {
  0% {
    top: -10%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Gentle shaking effect for petals */
@keyframes petals-shake {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(30px) rotate(10deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

.petal {
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: petals-fall, petals-shake;
  animation-duration: 10s, 4s; /* Adjust timing as needed */
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

/* Individual petal position and animation delays */
.petal:nth-of-type(1) {
  left: 1%;
  animation-delay: 0s, 0s;
}

.petal:nth-of-type(2) {
  left: 10%;
  animation-delay: 1s, 1s;
}

.petal:nth-of-type(3) {
  left: 20%;
  animation-delay: 3s, 0.5s;
}

.petal:nth-of-type(4) {
  left: 30%;
  animation-delay: 5s, 2s;
}

.petal:nth-of-type(5) {
  left: 40%;
  animation-delay: 2s, 3s;
}

.petal:nth-of-type(6) {
  left: 50%;
  animation-delay: 4s, 1s;
}

.petal:nth-of-type(7) {
  left: 60%;
  animation-delay: 6s, 2s;
}

.petal:nth-of-type(8) {
  left: 70%;
  animation-delay: 1.5s, 1s;
}

.petal:nth-of-type(9) {
  left: 80%;
  animation-delay: 3s, 0s;
}

.petal:nth-of-type(10) {
  left: 90%;
  animation-delay: 2s, 1.5s;
}

/* Rain Drop Styling */
.rain {
  color: #00f; /* Blue color for raindrops */
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #00f; /* Glow effect for raindrops */
}

@keyframes rain-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}

@keyframes rain-splash {
  0% {
    transform: scaleY(1) translateY(0px);
  }
  50% {
    transform: scaleY(1.5) translateY(10px); /* Splash effect */
  }
  100% {
    transform: scaleY(1) translateY(0px);
  }
}

.rain {
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: rain-fall, rain-splash;
  animation-duration: 5s, 0.5s; /* Faster fall and splash rates */
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

.rain:nth-of-type(1) {
  left: 2%;
  animation-delay: 0s, 0s;
}

.rain:nth-of-type(2) {
  left: 12%;
  animation-delay: 1s, 0s;
}

.rain:nth-of-type(3) {
  left: 22%;
  animation-delay: 2s, 0s;
}

.rain:nth-of-type(4) {
  left: 32%;
  animation-delay: 3s, 0s;
}

.rain:nth-of-type(5) {
  left: 42%;
  animation-delay: 4s, 0s;
}

.rain:nth-of-type(6) {
  left: 52%;
  animation-delay: 5s, 0s;
}

.rain:nth-of-type(7) {
  left: 62%;
  animation-delay: 6s, 0s;
}

.rain:nth-of-type(8) {
  left: 72%;
  animation-delay: 7s, 0s;
}

.rain:nth-of-type(9) {
  left: 82%;
  animation-delay: 8s, 0s;
}

.rain:nth-of-type(10) {
  left: 92%;
  animation-delay: 9s, 0s;
}

/* Firefly styles */
.firefly {
  color: #FFD700; /* Golden color */
  font-size: 1em;
  font-family: 'Arial', sans-serif;
  opacity: 0;
  text-shadow: 0 0 10px #FFD700;
}

/* Flickering animation for fireflies */
@keyframes firefly-flicker {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.firefly {
  position: fixed;
  top: 0;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: firefly-flicker;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Random positioning for fireflies */
.firefly:nth-of-type(1) { left: 5%; top: 10%; animation-delay: 0s; }
.firefly:nth-of-type(2) { left: 20%; top: 30%; animation-delay: 1.5s; }
.firefly:nth-of-type(3) { left: 35%; top: 50%; animation-delay: 3s; }
.firefly:nth-of-type(4) { left: 50%; top: 70%; animation-delay: 0.5s; }
.firefly:nth-of-type(5) { left: 65%; top: 20%; animation-delay: 2s; }
.firefly:nth-of-type(6) { left: 80%; top: 40%; animation-delay: 4s; }
.firefly:nth-of-type(7) { left: 95%; top: 60%; animation-delay: 1s; }
.firefly:nth-of-type(8) { left: 10%; top: 80%; animation-delay: 2.5s; }
.firefly:nth-of-type(9) { left: 25%; top: 15%; animation-delay: 3.5s; }
.firefly:nth-of-type(10) { left: 40%; top: 55%; animation-delay: 0.3s; }

/* Leaf styles */
.leaf {
  color: #ff4500; /* Orange color for leaves */
  font-size: 2em; /* Size of the leaves */
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  animation-name: leaves-fall, leaves-twirl;
  animation-duration: 10s, 5s; /* Adjust timing as needed */
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes leaves-fall {
  0% {
    top: -10%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes leaves-twirl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Individual leaf positions and delays */
.leaf:nth-of-type(1) {
  left: 10%;
  animation-delay: 0s, 0s;
}

.leaf:nth-of-type(2) {
  left: 20%;
  animation-delay: 2s, 1s;
}

.leaf:nth-of-type(3) {
  left: 30%;
  animation-delay: 4s, 2s;
}

.leaf:nth-of-type(4) {
  left: 40%;
  animation-delay: 6s, 3s;
}

.leaf:nth-of-type(5) {
  left: 50%;
  animation-delay: 8s, 4s;
}

.leaf:nth-of-type(6) {
  left: 60%;
  animation-delay: 10s, 5s;
}

.leaf:nth-of-type(7) {
  left: 70%;
  animation-delay: 1s, 6s;
}

.leaf:nth-of-type(8) {
  left: 80%;
  animation-delay: 3s, 7s;
}

.leaf:nth-of-type(9) {
  left: 90%;
  animation-delay: 5s, 8s;
}

/* Bubble styles */
.bubble {
  color: #00BFFF; /* DeepSkyBlue color */
  font-size: 1.5em;
  font-family: 'Arial', sans-serif;
  opacity: 0.8;
  text-shadow: 0 0 10px #00BFFF;
}

/* Floating animation for bubbles */
@keyframes bubble-float {
  0% {
    bottom: -10%;
    opacity: 0.5;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

.bubble {
  position: fixed;
  bottom: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: bubble-float;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Individual bubble position and animation delays */
.bubble:nth-of-type(1) { left: 5%; animation-delay: 0s; }
.bubble:nth-of-type(2) { left: 15%; animation-delay: 1s; }
.bubble:nth-of-type(3) { left: 25%; animation-delay: 3s; }
.bubble:nth-of-type(4) { left: 35%; animation-delay: 5s; }
.bubble:nth-of-type(5) { left: 45%; animation-delay: 2s; }
.bubble:nth-of-type(6) { left: 55%; animation-delay: 4s; }
.bubble:nth-of-type(7) { left: 65%; animation-delay: 6s; }
.bubble:nth-of-type(8) { left: 75%; animation-delay: 1.5s; }
.bubble:nth-of-type(9) { left: 85%; animation-delay: 3s; }
.bubble:nth-of-type(10) { left: 95%; animation-delay: 2s; }

/* Letter styles */
.letter {
  color: #000; /* Black color for letters */
  font-size: 2em; /* Size of the letters */
  font-family: 'Arial', sans-serif;
  text-shadow: 0 0 5px #fff; /* Optional, can add glow effect */
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: letters-fall;
  animation-duration: 10s; /* Adjust timing as needed */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Falling animation for letters */
@keyframes letters-fall {
  0% {
    top: -10%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Individual letter positions and delays */
.letter:nth-of-type(1) {
  left: 5%;
  animation-delay: 0s;
}

.letter:nth-of-type(2) {
  left: 15%;
  animation-delay: 1s;
}

.letter:nth-of-type(3) {
  left: 25%;
  animation-delay: 2s;
}

.letter:nth-of-type(4) {
  left: 35%;
  animation-delay: 3s;
}

.letter:nth-of-type(5) {
  left: 45%;
  animation-delay: 4s;
}

.letter:nth-of-type(6) {
  left: 55%;
  animation-delay: 5s;
}

.letter:nth-of-type(7) {
  left: 65%;
  animation-delay: 6s;
}

.letter:nth-of-type(8) {
  left: 75%;
  animation-delay: 7s;
}

.letter:nth-of-type(9) {
  left: 85%;
  animation-delay: 8s;
}

.letter:nth-of-type(10) {
  left: 95%;
  animation-delay: 9s;
}

/* Base lantern styles */
.lantern {
  color: #ffae42; /* Yellowish-reddish color */
  font-size: 1.5em; /* Adjust size as needed */
  position: fixed;
  bottom: -10%;
  z-index: 9999;
  animation-name: rise, drift, glow; /* Glow to animation-name */
  animation-duration: 10s, 5s, 2s; /* Duration for glow animation */
  animation-timing-function: linear, ease-in-out, ease-in-out; /* Timing function for glow */
  animation-iteration-count: infinite, infinite, infinite; /* Infinite loop for glow */
}

/* Animation for rising lanterns */
@keyframes rise {
  0% {
    bottom: -10%;
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 1;
  }
}

/* Animation for drifting lanterns */
@keyframes drift {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* Animation for glowing lanterns */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 165, 79, 0.8), 0 0 10px rgba(255, 69, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 165, 79, 1), 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.6);
    opacity: 0.8;
  }
}

/* Position and animation delays for individual lanterns */
.lantern:nth-of-type(1) {
  left: 5%;
  animation-delay: 0s;
  animation-duration: 10s, 5s;
}

.lantern:nth-of-type(2) {
  left: 15%;
  animation-delay: 2.3s;
  animation-duration: 12s, 5.5s;
}

.lantern:nth-of-type(3) {
  left: 30%;
  animation-delay: 1.1s;
  animation-duration: 9s, 4.8s;
}

.lantern:nth-of-type(4) {
  left: 45%;
  animation-delay: 3.7s;
  animation-duration: 11s, 5.2s;
}

.lantern:nth-of-type(5) {
  left: 60%;
  animation-delay: 0.9s;
  animation-duration: 10s, 5s;
}

.lantern:nth-of-type(6) {
  left: 75%;
  animation-delay: 4.4s;
  animation-duration: 9.5s, 4.6s;
}

.lantern:nth-of-type(7) {
  left: 90%;
  animation-delay: 1.8s;
  animation-duration: 11.5s, 5.1s;
}

/* Meteor shower styles */
.meteor {
  position: fixed;
  top: -10%; /* Start above the viewport */
  width: 5px;
  height: 100px;
  background: linear-gradient(-130deg, #ffffff, rgba(255, 255, 255, 0)); /* Tail gradient */
  opacity: 0.9;
  z-index: 1;
  transform: rotate(-135deg); /* Ensure initial rotation */
  animation-name: fall, flicker;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glow effect */
  animation-duration: 2s, 0.2s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  text-shadow: 0 0 8px #ffd700, 0 0 15px #ffd700; /* Golden glow */
}
/* Add a circular ball at the beginning of the tail */
.meteor::after {
  content: "";
  position: absolute;
  width: 9px; /* Diameter of the ball */
  height: 10px;
  background: #ffffff; /* Color of the ball */
  border-radius: 50%; /* Makes the ball round */
  top: -5px; /* Position the ball at the start of the tail */
  left: -2.5px; /* Center the ball horizontally */
  transform: translateY(50%); /* Adjust vertical alignment */
  z-index: 10; /* Ensure ball is above the tail */
}

/* Animation for falling meteors */
@keyframes fall {
  0% {
    transform: translateX(0) translateY(0) rotate(-130deg); /* Initial state with correct rotation */
  }
  100% {
    transform: translateX(-500px) translateY(500px) rotate(-145deg); /* Moves diagonally left-down with correct rotation */
  }
}

/* Flicker effect for meteors */
@keyframes flicker {
  0%, 50%, 100% {
    opacity: 0.8;
  }
  25%, 75% {
    opacity: 0.4;
  }
}

/* Individual meteor positions and delays */
.meteor:nth-of-type(1) {
  right: 0;
  animation-delay: 0s;
  animation-duration: 1.5s; /* Faster */
}

.meteor:nth-of-type(2) {
  right: 10%;
  animation-delay: 0.5s;
  animation-duration: 2s; /* Default speed */
}

.meteor:nth-of-type(3) {
  right: 20%;
  animation-delay: 1s;
  animation-duration: 2.5s; /* Slower */
}

.meteor:nth-of-type(4) {
  right: 30%;
  animation-delay: 1.5s;
  animation-duration: 1.8s;
}

.meteor:nth-of-type(5) {
  right: 40%;
  animation-delay: 2s;
  animation-duration: 1.7s;
}

.meteor:nth-of-type(6) {
  right: 50%;
  animation-delay: 0.7s;
  animation-duration: 2.2s;
}

.meteor:nth-of-type(7) {
  right: 60%;
  animation-delay: 1.3s;
  animation-duration: 1.6s;
}

.meteor:nth-of-type(8) {
  right: 70%;
  animation-delay: 0.2s;
  animation-duration: 2.8s; /* Even slower */
}

.meteor:nth-of-type(9) {
  right: 80%;
  animation-delay: 2.5s;
  animation-duration: 1.4s;
}

.meteor:nth-of-type(10) {
  right: 90%;
  animation-delay: 1.8s;
  animation-duration: 1.9s;
}

/* Ripple styles */
.ripple {
  border: 2px solid #00f; /* Blue color for the ripples */
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  opacity: 0;
  animation-name: ripple-expand;
  animation-duration: 3s; /* Adjust timing as needed */
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes ripple-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* Multiple ripple effects */
.ripple:nth-of-type(1) {
  animation-delay: 0s;
}

.ripple:nth-of-type(2) {
  animation-delay: 0.5s;
}

.ripple:nth-of-type(3) {
  animation-delay: 1s;
}

.ripple:nth-of-type(4) {
  animation-delay: 1.5s;
}