@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1; /* 👈 keeps it behind your frame */
    background: var(--bg-light); /* fallback for light mode */
}

body.dark .background {
    background: var(--bg-dark); /* 👈 adapt to dark mode */
}

.background span {
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #1e1e1e;
    top: 78%;
    left: 40%;
    animation-duration: 52s;
    animation-delay: -34s;
    transform-origin: 10vw -23vh;
    box-shadow: 2vmin 0 0.47422582747187425vmin currentColor;
}
.background span:nth-child(1) {
    color: #1e1e1e;
    top: 55%;
    left: 78%;
    animation-duration: 8s;
    animation-delay: -35s;
    transform-origin: 16vw -18vh;
    box-shadow: -2vmin 0 0.45996484364146606vmin currentColor;
}
.background span:nth-child(2) {
    color: #1e1e1e;
    top: 26%;
    left: 10%;
    animation-duration: 25s;
    animation-delay: -16s;
    transform-origin: -24vw -20vh;
    box-shadow: -2vmin 0 1.2435311314979853vmin currentColor;
}
.background span:nth-child(3) {
    color: #1e1e1e;
    top: 35%;
    left: 46%;
    animation-duration: 37s;
    animation-delay: -50s;
    transform-origin: 13vw 16vh;
    box-shadow: -2vmin 0 0.5465081065298335vmin currentColor;
}
.background span:nth-child(4) {
    color: #1e1e1e;
    top: 44%;
    left: 85%;
    animation-duration: 48s;
    animation-delay: -30s;
    transform-origin: 0vw 21vh;
    box-shadow: -2vmin 0 1.0402881336885192vmin currentColor;
}
.background span:nth-child(5) {
    color: #1e1e1e;
    top: 86%;
    left: 67%;
    animation-duration: 15s;
    animation-delay: -39s;
    transform-origin: 14vw -24vh;
    box-shadow: 2vmin 0 1.140812174906185vmin currentColor;
}
.background span:nth-child(6) {
    color: #1e1e1e;
    top: 86%;
    left: 57%;
    animation-duration: 27s;
    animation-delay: -21s;
    transform-origin: 4vw -1vh;
    box-shadow: 2vmin 0 0.9363229631980601vmin currentColor;
}
.background span:nth-child(7) {
    color: #1e1e1e;
    top: 89%;
    left: 83%;
    animation-duration: 51s;
    animation-delay: -48s;
    transform-origin: -4vw 6vh;
    box-shadow: 2vmin 0 1.0903663793868652vmin currentColor;
}
.background span:nth-child(8) {
    color: #1e1e1e;
    top: 14%;
    left: 22%;
    animation-duration: 31s;
    animation-delay: -26s;
    transform-origin: 21vw -17vh;
    box-shadow: -2vmin 0 1.1528630448075745vmin currentColor;
}
.background span:nth-child(9) {
    color: #1e1e1e;
    top: 96%;
    left: 23%;
    animation-duration: 27s;
    animation-delay: -8s;
    transform-origin: -11vw 4vh;
    box-shadow: -2vmin 0 0.3362768970287764vmin currentColor;
}
.background span:nth-child(10) {
    color: #1e1e1e;
    top: 31%;
    left: 100%;
    animation-duration: 32s;
    animation-delay: -39s;
    transform-origin: -2vw 15vh;
    box-shadow: -2vmin 0 0.6238305446960504vmin currentColor;
}
.background span:nth-child(11) {
    color: #1e1e1e;
    top: 16%;
    left: 28%;
    animation-duration: 49s;
    animation-delay: -41s;
    transform-origin: -12vw -15vh;
    box-shadow: -2vmin 0 0.9993705512354533vmin currentColor;
}
.background span:nth-child(12) {
    color: #1e1e1e;
    top: 82%;
    left: 97%;
    animation-duration: 14s;
    animation-delay: -18s;
    transform-origin: 5vw 4vh;
    box-shadow: -2vmin 0 0.5580727274856718vmin currentColor;
}
.background span:nth-child(13) {
    color: #1e1e1e;
    top: 70%;
    left: 49%;
    animation-duration: 31s;
    animation-delay: -27s;
    transform-origin: 5vw 8vh;
    box-shadow: 2vmin 0 1.071027509573348vmin currentColor;
}
.background span:nth-child(14) {
    color: #1e1e1e;
    top: 8%;
    left: 36%;
    animation-duration: 7s;
    animation-delay: -18s;
    transform-origin: 20vw -13vh;
    box-shadow: 2vmin 0 0.7781376084875853vmin currentColor;
}
.background span:nth-child(15) {
    color: #1e1e1e;
    top: 65%;
    left: 12%;
    animation-duration: 34s;
    animation-delay: -47s;
    transform-origin: 1vw 19vh;
    box-shadow: 2vmin 0 0.5499996024042179vmin currentColor;
}
.background span:nth-child(16) {
    color: #1e1e1e;
    top: 72%;
    left: 3%;
    animation-duration: 47s;
    animation-delay: -24s;
    transform-origin: 19vw -20vh;
    box-shadow: 2vmin 0 1.1011204795292104vmin currentColor;
}
.background span:nth-child(17) {
    color: #1e1e1e;
    top: 83%;
    left: 39%;
    animation-duration: 33s;
    animation-delay: -19s;
    transform-origin: 11vw 4vh;
    box-shadow: 2vmin 0 0.829128467560141vmin currentColor;
}
.background span:nth-child(18) {
    color: #1e1e1e;
    top: 50%;
    left: 26%;
    animation-duration: 47s;
    animation-delay: -46s;
    transform-origin: 23vw 12vh;
    box-shadow: -2vmin 0 0.7005844381381603vmin currentColor;
}
.background span:nth-child(19) {
    color: #1e1e1e;
    top: 15%;
    left: 1%;
    animation-duration: 18s;
    animation-delay: -32s;
    transform-origin: 2vw -5vh;
    box-shadow: -2vmin 0 0.3611568176492149vmin currentColor;
}
.background span:nth-child(20) {
    color: #1e1e1e;
    top: 33%;
    left: 51%;
    animation-duration: 47s;
    animation-delay: -16s;
    transform-origin: 16vw -18vh;
    box-shadow: -2vmin 0 1.0372458871162253vmin currentColor;
}
.background span:nth-child(21) {
    color: #1e1e1e;
    top: 36%;
    left: 2%;
    animation-duration: 22s;
    animation-delay: -15s;
    transform-origin: 11vw 19vh;
    box-shadow: -2vmin 0 0.802451355019981vmin currentColor;
}
.background span:nth-child(22) {
    color: #1e1e1e;
    top: 32%;
    left: 1%;
    animation-duration: 31s;
    animation-delay: -6s;
    transform-origin: 10vw -2vh;
    box-shadow: -2vmin 0 0.5706318090367731vmin currentColor;
}
.background span:nth-child(23) {
    color: #1e1e1e;
    top: 74%;
    left: 91%;
    animation-duration: 11s;
    animation-delay: -5s;
    transform-origin: 17vw 21vh;
    box-shadow: 2vmin 0 0.8186320878689305vmin currentColor;
}
.background span:nth-child(24) {
    color: #1e1e1e;
    top: 48%;
    left: 56%;
    animation-duration: 18s;
    animation-delay: -14s;
    transform-origin: -19vw -15vh;
    box-shadow: -2vmin 0 0.7349585679382717vmin currentColor;
}
.background span:nth-child(25) {
    color: #1e1e1e;
    top: 76%;
    left: 53%;
    animation-duration: 53s;
    animation-delay: -7s;
    transform-origin: 15vw -22vh;
    box-shadow: -2vmin 0 0.5419202513118412vmin currentColor;
}
.background span:nth-child(26) {
    color: #1e1e1e;
    top: 85%;
    left: 45%;
    animation-duration: 12s;
    animation-delay: -20s;
    transform-origin: -22vw 11vh;
    box-shadow: -2vmin 0 0.8628169469056344vmin currentColor;
}