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

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #f5f7fa;
    overflow: hidden;
    z-index: -1;
}

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


.background span:nth-child(0) {
    color: #4db1ff;
    top: 57%;
    left: 99%;
    animation-duration: 142s;
    animation-delay: -104s;
    transform-origin: 10vw 25vh;
    box-shadow: 12vmin 0 1.9870496045506758vmin currentColor;
}
.background span:nth-child(1) {
    color: #1d2c3e;
    top: 77%;
    left: 98%;
    animation-duration: 123s;
    animation-delay: -218s;
    transform-origin: -20vw -1vh;
    box-shadow: 12vmin 0 1.923124314577232vmin currentColor;
}
.background span:nth-child(2) {
    color: #0435ec;
    top: 64%;
    left: 33%;
    animation-duration: 156s;
    animation-delay: -150s;
    transform-origin: -8vw -11vh;
    box-shadow: 12vmin 0 1.9543399087346751vmin currentColor;
}
.background span:nth-child(3) {
    color: #1d2c3e;
    top: 88%;
    left: 67%;
    animation-duration: 279s;
    animation-delay: -96s;
    transform-origin: 13vw 3vh;
    box-shadow: -12vmin 0 1.9570213862114287vmin currentColor;
}
.background span:nth-child(4) {
    color: #4db1ff;
    top: 95%;
    left: 37%;
    animation-duration: 208s;
    animation-delay: -77s;
    transform-origin: 19vw 0vh;
    box-shadow: -12vmin 0 2.364418326569302vmin currentColor;
}
.background span:nth-child(5) {
    color: #1d2c3e;
    top: 84%;
    left: 77%;
    animation-duration: 295s;
    animation-delay: -3s;
    transform-origin: -2vw -9vh;
    box-shadow: -12vmin 0 1.71376038049663vmin currentColor;
}