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

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #f7f7f7;
    overflow: hidden;
}

@media (max-width: 576px) {
    
    .background {
        overflow-x: hidden;
        overflow-y: scroll;    
    }
}

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


.background .span:nth-child(0) {
    color: #ef6b436e;
    top: 94%;
    left: 9%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 23vw -9vh;
    box-shadow: 18vmin 0 3.120467111973156vmin currentColor;
}

.background .span:nth-child(1) {
    color: #0085a36c;
    top: 76%;
    left: 15%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 4vw 13vh;
    box-shadow: -18vmin 0 3.212778297208432vmin currentColor;
}

.background .span:nth-child(2) {
    color: #adb7c2;
    top: 47%;
    left: 64%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -5vw -8vh;
    box-shadow: -18vmin 0 2.9732635656662314vmin currentColor;
}

.background .span:nth-child(3) {
    color: #0085a36c;
    top: 56%;
    left: 37%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 8vw -24vh;
    box-shadow: -18vmin 0 2.406834191328111vmin currentColor;
}

.background .span:nth-child(4) {
    color: #ef6b436e;
    top: 9%;
    left: 13%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -10vw 18vh;
    box-shadow: -18vmin 0 2.8472493928032585vmin currentColor;
}

.background .span:nth-child(5) {
    color: #ef6b436e;
    top: 60%;
    left: 32%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -16vw 13vh;
    box-shadow: -18vmin 0 2.7686023023768143vmin currentColor;
}

/* .background .span:nth-child(6) {
    color: #adb7c2;
    top: 85%;
    left: 2%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 3vw 23vh;
    box-shadow: -18vmin 0 2.467465795543042vmin currentColor;
} */

.background .span:nth-child(7) {
    color: #0085a36c;
    top: 48%;
    left: 56%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 20vw 7vh;
    box-shadow: -18vmin 0 2.998614547075606vmin currentColor;
}

.background .span:nth-child(8) {
    color: #ef6b436e;
    top: 58%;
    left: 100%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -3vw 5vh;
    box-shadow: -18vmin 0 3.0212545689032333vmin currentColor;
}

.background .span:nth-child(9) {
    color: #ef6b436e;
    top: 70%;
    left: 76%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 16vw 18vh;
    box-shadow: -18vmin 0 3.027026750203093vmin currentColor;
}

.background .span:nth-child(10) {
    color: #0085a36c;
    top: 7%;
    left: 37%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 25vw -6vh;
    box-shadow: -18vmin 0 2.878932595588469vmin currentColor;
}

.background .span:nth-child(11) {
    color: #0085a36c;
    top: 43%;
    left: 2%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -15vw -3vh;
    box-shadow: 18vmin 0 2.2823510566031633vmin currentColor;
}