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

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

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


.background span:nth-child(0) {
    color: #aeea94;
    top: 53%;
    left: 6%;
    animation-duration: 238s;
    animation-delay: -93s;
    transform-origin: 8vw 5vh;
    box-shadow: -24vmin 0 3.000588445980563vmin currentColor;
}

.background span:nth-child(1) {
    color: #fffbca;
    top: 93%;
    left: 65%;
    animation-duration: 228s;
    animation-delay: -299s;
    transform-origin: -16vw -10vh;
    box-shadow: -24vmin 0 3.3622166206188195vmin currentColor;
}

.background span:nth-child(2) {
    color: #b771e5;
    top: 20%;
    left: 90%;
    animation-duration: 379s;
    animation-delay: -1s;
    transform-origin: -23vw -15vh;
    box-shadow: 24vmin 0 3.5745962434759933vmin currentColor;
}

.background span:nth-child(3) {
    color: #fffbca;
    top: 77%;
    left: 94%;
    animation-duration: 120s;
    animation-delay: -141s;
    transform-origin: -11vw 7vh;
    box-shadow: 24vmin 0 3.943483729569164vmin currentColor;
}

.background span:nth-child(4) {
    color: #aeea94;
    top: 50%;
    left: 20%;
    animation-duration: 248s;
    animation-delay: -100s;
    transform-origin: 24vw -22vh;
    box-shadow: 24vmin 0 3.887645258708899vmin currentColor;
}

.background span:nth-child(5) {
    color: #fffbca;
    top: 25%;
    left: 96%;
    animation-duration: 202s;
    animation-delay: -108s;
    transform-origin: 10vw 20vh;
    box-shadow: -24vmin 0 3.3989062505677534vmin currentColor;
}

.background span:nth-child(6) {
    color: #fffbca;
    top: 91%;
    left: 7%;
    animation-duration: 307s;
    animation-delay: -220s;
    transform-origin: 25vw -22vh;
    box-shadow: -24vmin 0 3.149337630501698vmin currentColor;
}

.background span:nth-child(7) {
    color: #aeea94;
    top: 75%;
    left: 48%;
    animation-duration: 128s;
    animation-delay: -143s;
    transform-origin: 14vw -15vh;
    box-shadow: -24vmin 0 3.049259421992125vmin currentColor;
}

.background span:nth-child(8) {
    color: #aeea94;
    top: 29%;
    left: 41%;
    animation-duration: 304s;
    animation-delay: -269s;
    transform-origin: 17vw -2vh;
    box-shadow: 24vmin 0 3.063504661587025vmin currentColor;
}

.background span:nth-child(9) {
    color: #fffbca;
    top: 89%;
    left: 59%;
    animation-duration: 385s;
    animation-delay: -205s;
    transform-origin: -9vw -6vh;
    box-shadow: -24vmin 0 3.2826029485817876vmin currentColor;
}

.background span:nth-child(10) {
    color: #fffbca;
    top: 93%;
    left: 32%;
    animation-duration: 207s;
    animation-delay: -149s;
    transform-origin: 7vw 25vh;
    box-shadow: 24vmin 0 3.9734208103678914vmin currentColor;
}

.background span:nth-child(11) {
    color: #fffbca;
    top: 72%;
    left: 30%;
    animation-duration: 15s;
    animation-delay: -350s;
    transform-origin: -9vw -17vh;
    box-shadow: -24vmin 0 3.439046396515215vmin currentColor;
}