User:TyphoonAmpil/Lanterns.css

/* 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;
}