.firefly {
    position: absolute;
    border-radius: 100%;
    background: var(--fireflies-gradient);
    box-shadow: 0 0 10px 0px var(--fireflies-light-color);
}

@keyframes show1 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.24;
    }
    63% {
        opacity: 0.98;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse1 {
    0%,
    100% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(1) {
    height: 9px;
    width: 9px;
    top: 76%;
    left: 21%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse1 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show1 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -7s;
    animation-duration: 7s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show2 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.13;
    }
    63% {
        opacity: 0.77;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse2 {
    0%,
    100% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 5px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(2) {
    height: 10px;
    width: 10px;
    top: 98%;
    left: 92%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse2 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show2 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -9s;
    animation-duration: 10s, 6s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show3 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.25;
    }
    63% {
        opacity: 0.94;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse3 {
    0%,
    100% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 3px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(3) {
    height: 9px;
    width: 9px;
    top: 61%;
    left: 19%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse3 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show3 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -6s;
    animation-duration: 8s, 6s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show4 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.42;
    }
    63% {
        opacity: 0.72;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse4 {
    0%,
    100% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 8px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 9px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(4) {
    height: 6px;
    width: 6px;
    top: 43%;
    left: 1%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse4 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show4 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 5 s forwards;
    animation-delay: -8s;
    animation-duration: 10s, 8s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show5 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.04;
    }
    63% {
        opacity: 0.84;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse5 {
    0%,
    100% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(5) {
    height: 6px;
    width: 6px;
    top: 64%;
    left: 68%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse5 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show5 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 9 s forwards;
    animation-delay: -8s;
    animation-duration: 8s, 5s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show6 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.36;
    }
    63% {
        opacity: 0.59;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse6 {
    0%,
    100% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 4px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(6) {
    height: 10px;
    width: 10px;
    top: 50%;
    left: 64%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse6 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show6 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 5 s forwards;
    animation-delay: -9s;
    animation-duration: 5s, 5s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show7 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.19;
    }
    63% {
        opacity: 0.68;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse7 {
    0%,
    100% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 4px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(7) {
    height: 9px;
    width: 9px;
    top: 50%;
    left: 48%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse7 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show7 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 9 s forwards;
    animation-delay: -5s;
    animation-duration: 13s, 5s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show8 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.41;
    }
    63% {
        opacity: 0.63;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse8 {
    0%,
    100% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 3px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(8) {
    height: 6px;
    width: 6px;
    top: 76%;
    left: 58%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse8 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show8 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 7 s forwards;
    animation-delay: -9s;
    animation-duration: 6s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show9 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.29;
    }
    63% {
        opacity: 0.8;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse9 {
    0%,
    100% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 4px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(9) {
    height: 6px;
    width: 6px;
    top: 40%;
    left: 100%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse9 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show9 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 9 s forwards;
    animation-delay: -6s;
    animation-duration: 7s, 9s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show10 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.21;
    }
    63% {
        opacity: 0.8;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse10 {
    0%,
    100% {
        box-shadow: 0 0 9px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 4px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(10) {
    height: 10px;
    width: 10px;
    top: 18%;
    left: 23%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse10 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show10 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 6 s forwards;
    animation-delay: -9s;
    animation-duration: 8s, 5s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show11 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.1;
    }
    63% {
        opacity: 0.74;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse11 {
    0%,
    100% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(11) {
    height: 9px;
    width: 9px;
    top: 36%;
    left: 97%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse11 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show11 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 5 s forwards;
    animation-delay: -7s;
    animation-duration: 12s, 6s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show12 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.34;
    }
    63% {
        opacity: 0.84;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse12 {
    0%,
    100% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 5px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 7px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 4px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(12) {
    height: 11px;
    width: 11px;
    top: 80%;
    left: 80%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse12 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show12 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -7s;
    animation-duration: 12s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show13 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.2;
    }
    63% {
        opacity: 0.78;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse13 {
    0%,
    100% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 9px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 3px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(13) {
    height: 6px;
    width: 6px;
    top: 98%;
    left: 68%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse13 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show13 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -6s;
    animation-duration: 11s, 6s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show14 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.3;
    }
    63% {
        opacity: 0.99;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse14 {
    0%,
    100% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 9px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 9px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(14) {
    height: 5px;
    width: 5px;
    top: 52%;
    left: 58%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse14 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show14 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -7s;
    animation-duration: 9s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show15 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.48;
    }
    63% {
        opacity: 0.99;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse15 {
    0%,
    100% {
        box-shadow: 0 0 6px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 3px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(15) {
    height: 10px;
    width: 10px;
    top: 32%;
    left: 39%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse15 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show15 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 9 s forwards;
    animation-delay: -6s;
    animation-duration: 9s, 5s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show16 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.43;
    }
    63% {
        opacity: 0.59;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse16 {
    0%,
    100% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 4px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 3px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(16) {
    height: 11px;
    width: 11px;
    top: 94%;
    left: 36%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse16 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show16 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 8 s forwards;
    animation-delay: -6s;
    animation-duration: 8s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show17 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.49;
    }
    63% {
        opacity: 0.9;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse17 {
    0%,
    100% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 4px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 6px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(17) {
    height: 6px;
    width: 6px;
    top: 73%;
    left: 60%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse17 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show17 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 9 s forwards;
    animation-delay: -5s;
    animation-duration: 7s, 8s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show18 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.23;
    }
    63% {
        opacity: 0.64;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse18 {
    0%,
    100% {
        box-shadow: 0 0 7px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 4px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 8px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(18) {
    height: 9px;
    width: 9px;
    top: 9%;
    left: 43%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse18 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show18 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 6 s forwards;
    animation-delay: -6s;
    animation-duration: 10s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show19 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.04;
    }
    63% {
        opacity: 0.56;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse19 {
    0%,
    100% {
        box-shadow: 0 0 10px 1px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 6px 3px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 3px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 5px 1px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(19) {
    height: 5px;
    width: 5px;
    top: 100%;
    left: 1%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse19 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show19 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 7 s forwards;
    animation-delay: -6s;
    animation-duration: 11s, 7s;
    animation-fill-mode: backwards, backwards;
}

@keyframes show20 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    36% {
        opacity: 0.1;
    }
    63% {
        opacity: 0.98;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulse20 {
    0%,
    100% {
        box-shadow: 0 0 7px 2px var(--fireflies-light-color);
    }
    16.666% {
        box-shadow: 0 0 8px 1px var(--fireflies-light-color);
    }
    33.333% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    50% {
        box-shadow: 0 0 3px 1px var(--fireflies-light-color);
    }
    66.666% {
        box-shadow: 0 0 5px 2px var(--fireflies-light-color);
    }
    83.333% {
        box-shadow: 0 0 10px 2px var(--fireflies-light-color);
    }
}
.fireflies .firefly:nth-child(20) {
    height: 8px;
    width: 8px;
    top: 50%;
    left: 54%;
    animation: leftright 12s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 4s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), pulse20 3s infinite cubic-bezier(0.39, 0, 0.63, 1), show20 4s infinite cubic-bezier(0.39, 0, 0.63, 1), 5 s forwards;
    animation-delay: -7s;
    animation-duration: 9s, 8s;
    animation-fill-mode: backwards, backwards;
}

@keyframes leftright {
    0%,
    100% {
        left: 20%;
    }
    16.666% {
        left: 90%;
    }
    33.333% {
        left: 10%;
    }
    50% {
        left: 50%;
    }
    66.666% {
        left: 70%;
    }
    83.333% {
        left: 40%;
    }
}
@keyframes updown {
    0%,
    100% {
        top: 0px;
    }
    25% {
        top: 70%;
    }
    50% {
        top: 50%;
    }
}