.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
  z-index: -100;
}

.firefly::before,
.firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw var(--firefly-color, yellow);
  animation: drift ease alternate infinite, flash ease infinite;
}

body {
  --firefly-color: yellow;
}

body.blue-fireflies {
  --firefly-color: blue;
}

body.red-fireflies {
  --firefly-color: red;
}

body.green-fireflies {
  --firefly-color: limegreen;
}

body.purple-fireflies {
  --firefly-color: purple;
}

/* Firefly 1 */
.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 10s; /* random(10) + 8s */
}
.firefly:nth-child(1)::after {
  animation-duration: 10s, 7s; /* random(10) + 8s, random(6000) + 5000ms */
  animation-delay: 0ms, 2s; /* 0ms, random(8000) + 500ms */
}
@keyframes move1 {
  0% { transform: translateX(-30vw) translateY(20vh) scale(0.5); }
  25% { transform: translateX(10vw) translateY(-40vh) scale(0.8); }
  50% { transform: translateX(40vw) translateY(10vh) scale(0.3); }
  75% { transform: translateX(-20vw) translateY(30vh) scale(0.9); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.6); }
}

/* Firefly 2 */
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 12s;
}
.firefly:nth-child(2)::after {
  animation-duration: 12s, 9s;
  animation-delay: 0ms, 4s;
}
@keyframes move2 {
  0% { transform: translateX(15vw) translateY(-25vh) scale(0.7); }
  25% { transform: translateX(-35vw) translateY(5vh) scale(0.4); }
  50% { transform: translateX(5vw) translateY(35vh) scale(0.9); }
  75% { transform: translateX(25vw) translateY(-15vh) scale(0.5); }
  100% { transform: translateX(-10vw) translateY(10vh) scale(0.8); }
}

/* Firefly 3 */
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 9s;
}
.firefly:nth-child(3)::after {
  animation-duration: 9s, 6s;
  animation-delay: 0ms, 1s;
}
@keyframes move3 {
  0% { transform: translateX(45vw) translateY(15vh) scale(0.4); }
  25% { transform: translateX(-10vw) translateY(-20vh) scale(0.7); }
  50% { transform: translateX(-40vw) translateY(25vh) scale(0.5); }
  75% { transform: translateX(20vw) translateY(-30vh) scale(0.8); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.6); }
}

/* Firefly 4 */
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 15s;
}
.firefly:nth-child(4)::after {
  animation-duration: 15s, 10s;
  animation-delay: 0ms, 5s;
}
@keyframes move4 {
  0% { transform: translateX(-5vw) translateY(40vh) scale(0.6); }
  25% { transform: translateX(30vw) translateY(-10vh) scale(0.3); }
  50% { transform: translateX(-25vw) translateY(-30vh) scale(0.8); }
  75% { transform: translateX(10vw) translateY(20vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Firefly 5 */
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 11s;
}
.firefly:nth-child(5)::after {
  animation-duration: 11s, 8s;
  animation-delay: 0ms, 3s;
}
@keyframes move5 {
  0% { transform: translateX(20vw) translateY(-10vh) scale(0.8); }
  25% { transform: translateX(-40vw) translateY(30vh) scale(0.5); }
  50% { transform: translateX(10vw) translateY(-20vh) scale(0.9); }
  75% { transform: translateX(30vw) translateY(5vh) scale(0.4); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Firefly 6 */
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 13s;
}
.firefly:nth-child(6)::after {
  animation-duration: 13s, 7.5s;
  animation-delay: 0ms, 2.5s;
}
@keyframes move6 {
  0% { transform: translateX(-15vw) translateY(-30vh) scale(0.3); }
  25% { transform: translateX(25vw) translateY(15vh) scale(0.6); }
  50% { transform: translateX(-30vw) translateY(40vh) scale(0.8); }
  75% { transform: translateX(5vw) translateY(-20vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Firefly 7 */
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 8s;
}
.firefly:nth-child(7)::after {
  animation-duration: 8s, 5.5s;
  animation-delay: 0ms, 0.8s;
}
@keyframes move7 {
  0% { transform: translateX(35vw) translateY(5vh) scale(0.9); }
  25% { transform: translateX(-20vw) translateY(-35vh) scale(0.4); }
  50% { transform: translateX(-5vw) translateY(20vh) scale(0.7); }
  75% { transform: translateX(40vw) translateY(-10vh) scale(0.6); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.8); }
}

/* Firefly 8 */
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 16s;
}
.firefly:nth-child(8)::after {
  animation-duration: 16s, 10.5s;
  animation-delay: 0ms, 6s;
}
@keyframes move8 {
  0% { transform: translateX(-40vw) translateY(10vh) scale(0.5); }
  25% { transform: translateX(5vw) translateY(-45vh) scale(0.8); }
  50% { transform: translateX(30vw) translateY(25vh) scale(0.3); }
  75% { transform: translateX(-10vw) translateY(35vh) scale(0.9); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.6); }
}

/* Firefly 9 */
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 10.5s;
}
.firefly:nth-child(9)::after {
  animation-duration: 10.5s, 6.5s;
  animation-delay: 0ms, 1.5s;
}
@keyframes move9 {
  0% { transform: translateX(10vw) translateY(30vh) scale(0.7); }
  25% { transform: translateX(-30vw) translateY(-15vh) scale(0.4); }
  50% { transform: translateX(20vw) translateY(-40vh) scale(0.9); }
  75% { transform: translateX(-5vw) translateY(10vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.8); }
}

/* Firefly 10 */
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 14s;
}
.firefly:nth-child(10)::after {
  animation-duration: 14s, 9.5s;
  animation-delay: 0ms, 4.5s;
}
@keyframes move10 {
  0% { transform: translateX(-25vw) translateY(-5vh) scale(0.4); }
  25% { transform: translateX(40vw) translateY(20vh) scale(0.7); }
  50% { transform: translateX(-15vw) translateY(-30vh) scale(0.5); }
  75% { transform: translateX(30vw) translateY(40vh) scale(0.8); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.6); }
}

/* Firefly 11 */
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 9.5s;
}
.firefly:nth-child(11)::after {
  animation-duration: 9.5s, 5s;
  animation-delay: 0ms, 0.5s;
}
@keyframes move11 {
  0% { transform: translateX(50vw) translateY(-20vh) scale(0.8); }
  25% { transform: translateX(-10vw) translateY(35vh) scale(0.5); }
  50% { transform: translateX(-35vw) translateY(-10vh) scale(0.9); }
  75% { transform: translateX(15vw) translateY(25vh) scale(0.4); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Firefly 12 */
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 17s;
}
.firefly:nth-child(12)::after {
  animation-duration: 17s, 11s;
  animation-delay: 0ms, 6.5s;
}
@keyframes move12 {
  0% { transform: translateX(-10vw) translateY(45vh) scale(0.6); }
  25% { transform: translateX(20vw) translateY(-25vh) scale(0.3); }
  50% { transform: translateX(-40vw) translateY(-5vh) scale(0.8); }
  75% { transform: translateX(5vw) translateY(30vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Firefly 13 */
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 8.5s;
}
.firefly:nth-child(13)::after {
  animation-duration: 8.5s, 6.2s;
  animation-delay: 0ms, 1.2s;
}
@keyframes move13 {
  0% { transform: translateX(25vw) translateY(-35vh) scale(0.5); }
  25% { transform: translateX(-30vw) translateY(10vh) scale(0.8); }
  50% { transform: translateX(10vw) translateY(40vh) scale(0.3); }
  75% { transform: translateX(45vw) translateY(-15vh) scale(0.9); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.6); }
}

/* Firefly 14 */
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 16.5s;
}
.firefly:nth-child(14)::after {
  animation-duration: 16.5s, 8.8s;
  animation-delay: 0ms, 3.8s;
}
@keyframes move14 {
  0% { transform: translateX(-35vw) translateY(25vh) scale(0.7); }
  25% { transform: translateX(5vw) translateY(-20vh) scale(0.4); }
  50% { transform: translateX(40vw) translateY(15vh) scale(0.9); }
  75% { transform: translateX(-15vw) translateY(-10vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.8); }
}

/* Firefly 15 */
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 18s;
}
.firefly:nth-child(15)::after {
  animation-duration: 18s, 10.2s;
  animation-delay: 0ms, 5.2s;
}
@keyframes move15 {
  0% { transform: translateX(5vw) translateY(-40vh) scale(0.3); }
  25% { transform: translateX(-25vw) translateY(30vh) scale(0.6); }
  50% { transform: translateX(15vw) translateY(-10vh) scale(0.8); }
  75% { transform: translateX(-45vw) translateY(20vh) scale(0.5); }
  100% { transform: translateX(0vw) translateY(0vh) scale(0.7); }
}

/* Common Keyframes */
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flash {
  0%,
  30%,
  100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw var(--firefly-color); 
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw var(--firefly-color); 
  }
}