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

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

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


.background span:nth-child(0) {
    color: #e9ce2c;
    top: 30%;
    left: 60%;
    animation-duration: 53s;
    animation-delay: -33s;
    transform-origin: 13vw -6vh;
    box-shadow: 40vmin 0 5.483034236085738vmin currentColor;
}
.background span:nth-child(1) {
    color: #687ec9;
    top: 32%;
    left: 37%;
    animation-duration: 24s;
    animation-delay: -30s;
    transform-origin: 23vw 12vh;
    box-shadow: -40vmin 0 5.613292435153449vmin currentColor;
}
.background span:nth-child(2) {
    color: #e9ce2c;
    top: 18%;
    left: 31%;
    animation-duration: 49s;
    animation-delay: -32s;
    transform-origin: 14vw -17vh;
    box-shadow: -40vmin 0 5.702117242063655vmin currentColor;
}
.background span:nth-child(3) {
    color: #b0228c;
    top: 63%;
    left: 98%;
    animation-duration: 37s;
    animation-delay: -9s;
    transform-origin: 15vw -4vh;
    box-shadow: 40vmin 0 5.902856624126876vmin currentColor;
}
.background span:nth-child(4) {
    color: #4ecdb4;
    top: 46%;
    left: 8%;
    animation-duration: 37s;
    animation-delay: -34s;
    transform-origin: -2vw 20vh;
    box-shadow: 40vmin 0 5.867127692631474vmin currentColor;
}
.background span:nth-child(5) {
    color: #687ec9;
    top: 4%;
    left: 80%;
    animation-duration: 47s;
    animation-delay: -40s;
    transform-origin: 0vw -6vh;
    box-shadow: -40vmin 0 5.907625650625911vmin currentColor;
}
.background span:nth-child(6) {
    color: #687ec9;
    top: 26%;
    left: 77%;
    animation-duration: 53s;
    animation-delay: -46s;
    transform-origin: -11vw 24vh;
    box-shadow: 40vmin 0 5.144613218845329vmin currentColor;
}
.background span:nth-child(7) {
    color: #4ecdb4;
    top: 19%;
    left: 17%;
    animation-duration: 26s;
    animation-delay: -29s;
    transform-origin: 25vw 25vh;
    box-shadow: 40vmin 0 5.67333265303605vmin currentColor;
}
.background span:nth-child(8) {
    color: #687ec9;
    top: 68%;
    left: 68%;
    animation-duration: 42s;
    animation-delay: -35s;
    transform-origin: 15vw 18vh;
    box-shadow: -40vmin 0 5.911151405370022vmin currentColor;
}
.background span:nth-child(9) {
    color: #b0228c;
    top: 25%;
    left: 88%;
    animation-duration: 38s;
    animation-delay: -19s;
    transform-origin: -3vw -4vh;
    box-shadow: 40vmin 0 5.151213424172222vmin currentColor;
}
.background span:nth-child(10) {
    color: #4ecdb4;
    top: 63%;
    left: 54%;
    animation-duration: 14s;
    animation-delay: -34s;
    transform-origin: -5vw -22vh;
    box-shadow: -40vmin 0 5.85291680153634vmin currentColor;
}
.background span:nth-child(11) {
    color: #e9ce2c;
    top: 97%;
    left: 98%;
    animation-duration: 20s;
    animation-delay: -15s;
    transform-origin: 14vw -3vh;
    box-shadow: 40vmin 0 5.068141308670963vmin currentColor;
}
.background span:nth-child(12) {
    color: #687ec9;
    top: 45%;
    left: 42%;
    animation-duration: 18s;
    animation-delay: -22s;
    transform-origin: -6vw -23vh;
    box-shadow: 40vmin 0 5.592984652991055vmin currentColor;
}
.background span:nth-child(13) {
    color: #e9ce2c;
    top: 4%;
    left: 38%;
    animation-duration: 54s;
    animation-delay: -20s;
    transform-origin: -10vw -15vh;
    box-shadow: 40vmin 0 5.769589856324206vmin currentColor;
}
.background span:nth-child(14) {
    color: #e9ce2c;
    top: 95%;
    left: 55%;
    animation-duration: 31s;
    animation-delay: -26s;
    transform-origin: -17vw 9vh;
    box-shadow: -40vmin 0 5.179436171967467vmin currentColor;
}
.background span:nth-child(15) {
    color: #b0228c;
    top: 73%;
    left: 92%;
    animation-duration: 23s;
    animation-delay: -18s;
    transform-origin: 16vw 22vh;
    box-shadow: 40vmin 0 5.444356956498907vmin currentColor;
}
.background span:nth-child(16) {
    color: #b0228c;
    top: 82%;
    left: 38%;
    animation-duration: 52s;
    animation-delay: -24s;
    transform-origin: -17vw -5vh;
    box-shadow: -40vmin 0 5.618988734574397vmin currentColor;
}
.background span:nth-child(17) {
    color: #687ec9;
    top: 33%;
    left: 45%;
    animation-duration: 37s;
    animation-delay: -36s;
    transform-origin: 11vw -1vh;
    box-shadow: 40vmin 0 5.0266532630341345vmin currentColor;
}
.background span:nth-child(18) {
    color: #687ec9;
    top: 12%;
    left: 95%;
    animation-duration: 15s;
    animation-delay: -35s;
    transform-origin: -18vw 5vh;
    box-shadow: 40vmin 0 5.963722526808162vmin currentColor;
}
.background span:nth-child(19) {
    color: #b0228c;
    top: 1%;
    left: 51%;
    animation-duration: 39s;
    animation-delay: -24s;
    transform-origin: 3vw 22vh;
    box-shadow: 40vmin 0 5.042806916403332vmin currentColor;
}