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

.background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(234 234 234 / 23%);
    /* background:rgb(215 211 255 / 56%); */
    overflow: hidden;
}

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


.background span:nth-child(0) {
    color: #E45A84;
    top: 17%;
    left: 34%;
    animation-duration: 247s;
    animation-delay: -395s;
    transform-origin: -13vw 21vh;
    box-shadow: 16vmin 0 2.6085552971518537vmin currentColor;
}
.background span:nth-child(1) {
    color: #583C87;
    top: 65%;
    left: 66%;
    animation-duration: 309s;
    animation-delay: -436s;
    transform-origin: -21vw 18vh;
    box-shadow: -16vmin 0 2.2008793332509047vmin currentColor;
}
.background span:nth-child(2) {
    color: #583C87;
    top: 87%;
    left: 81%;
    animation-duration: 490s;
    animation-delay: -380s;
    transform-origin: -20vw 12vh;
    box-shadow: 16vmin 0 2.803595230079755vmin currentColor;
}
.background span:nth-child(3) {
    color: #583C87;
    top: 53%;
    left: 51%;
    animation-duration: 141s;
    animation-delay: -451s;
    transform-origin: 19vw -17vh;
    box-shadow: 16vmin 0 2.367162662495556vmin currentColor;
}
.background span:nth-child(4) {
    color: #E45A84;
    top: 13%;
    left: 21%;
    animation-duration: 199s;
    animation-delay: -82s;
    transform-origin: 19vw -24vh;
    box-shadow: 16vmin 0 2.996254461335947vmin currentColor;
}