#fireflies {
    height: 100vh;
    width: 100vw;
    position: fixed;
}

.fireflies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    opacity: 0;
    animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--x, 0), var(--y, 0));
    }
}
@media (min-width: 768px) {
    .firefly {
        width: 8px;
        height: 8px;
    }
}