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

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #05061f;
    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: #028192;
    top: 61%;
    left: 65%;
    animation-duration: 42s;
    animation-delay: -40s;
    transform-origin: 25vw -20vh;
    box-shadow: -40vmin 0 5.114847538045289vmin currentColor;
}
.background span:nth-child(1) {
    color: #028192;
    top: 66%;
    left: 39%;
    animation-duration: 12s;
    animation-delay: -21s;
    transform-origin: 1vw -3vh;
    box-shadow: -40vmin 0 5.623980935584416vmin currentColor;
}
.background span:nth-child(2) {
    color: #028192;
    top: 98%;
    left: 69%;
    animation-duration: 45s;
    animation-delay: -11s;
    transform-origin: -3vw -5vh;
    box-shadow: -40vmin 0 5.884599558474212vmin currentColor;
}
.background span:nth-child(3) {
    color: #028192;
    top: 68%;
    left: 45%;
    animation-duration: 14s;
    animation-delay: -43s;
    transform-origin: 11vw 21vh;
    box-shadow: 40vmin 0 5.524956326388308vmin currentColor;
}
.background span:nth-child(4) {
    color: #028192;
    top: 5%;
    left: 74%;
    animation-duration: 18s;
    animation-delay: -39s;
    transform-origin: 5vw 23vh;
    box-shadow: -40vmin 0 5.396217027088623vmin currentColor;
}
.background span:nth-child(5) {
    color: #a21efa;
    top: 82%;
    left: 57%;
    animation-duration: 40s;
    animation-delay: -11s;
    transform-origin: 12vw 24vh;
    box-shadow: -40vmin 0 5.82132763645513vmin currentColor;
}
.background span:nth-child(6) {
    color: #1c71d8;
    top: 14%;
    left: 67%;
    animation-duration: 6s;
    animation-delay: -50s;
    transform-origin: 14vw 25vh;
    box-shadow: -40vmin 0 5.1044379637441vmin currentColor;
}
.background span:nth-child(7) {
    color: #1c71d8;
    top: 45%;
    left: 96%;
    animation-duration: 28s;
    animation-delay: -43s;
    transform-origin: -15vw -20vh;
    box-shadow: -40vmin 0 5.112188366403499vmin currentColor;
}
.background span:nth-child(8) {
    color: #1c71d8;
    top: 53%;
    left: 44%;
    animation-duration: 52s;
    animation-delay: -23s;
    transform-origin: 8vw -19vh;
    box-shadow: -40vmin 0 5.17367393829751vmin currentColor;
}
.background span:nth-child(9) {
    color: #a21efa;
    top: 42%;
    left: 12%;
    animation-duration: 28s;
    animation-delay: -25s;
    transform-origin: 8vw -2vh;
    box-shadow: 40vmin 0 5.854957586799769vmin currentColor;
}
.background span:nth-child(10) {
    color: #a21efa;
    top: 33%;
    left: 27%;
    animation-duration: 6s;
    animation-delay: -5s;
    transform-origin: 5vw 6vh;
    box-shadow: 40vmin 0 5.1815783005045395vmin currentColor;
}
.background span:nth-child(11) {
    color: #028192;
    top: 44%;
    left: 66%;
    animation-duration: 34s;
    animation-delay: -7s;
    transform-origin: -8vw 12vh;
    box-shadow: -40vmin 0 5.429228083815428vmin currentColor;
}
.background span:nth-child(12) {
    color: #028192;
    top: 71%;
    left: 1%;
    animation-duration: 35s;
    animation-delay: -14s;
    transform-origin: -5vw -1vh;
    box-shadow: -40vmin 0 5.130668310276184vmin currentColor;
}
.background span:nth-child(13) {
    color: #1c71d8;
    top: 81%;
    left: 9%;
    animation-duration: 37s;
    animation-delay: -7s;
    transform-origin: -3vw 20vh;
    box-shadow: -40vmin 0 5.894045880352851vmin currentColor;
}
.background span:nth-child(14) {
    color: #028192;
    top: 24%;
    left: 9%;
    animation-duration: 6s;
    animation-delay: -31s;
    transform-origin: -24vw -8vh;
    box-shadow: 40vmin 0 5.623558258604099vmin currentColor;
}
.background span:nth-child(15) {
    color: #028192;
    top: 38%;
    left: 33%;
    animation-duration: 18s;
    animation-delay: -20s;
    transform-origin: 22vw -15vh;
    box-shadow: -40vmin 0 5.10635970523711vmin currentColor;
}
.background span:nth-child(16) {
    color: #028192;
    top: 38%;
    left: 20%;
    animation-duration: 30s;
    animation-delay: -26s;
    transform-origin: 0vw 22vh;
    box-shadow: 40vmin 0 5.96480529245649vmin currentColor;
}
.background span:nth-child(17) {
    color: #028192;
    top: 93%;
    left: 86%;
    animation-duration: 6s;
    animation-delay: -24s;
    transform-origin: 8vw 20vh;
    box-shadow: 40vmin 0 5.272739410594917vmin currentColor;
}
.background span:nth-child(18) {
    color: #a21efa;
    top: 17%;
    left: 21%;
    animation-duration: 50s;
    animation-delay: -32s;
    transform-origin: 4vw 21vh;
    box-shadow: 40vmin 0 5.774124949399574vmin currentColor;
}
.background span:nth-child(19) {
    color: #a21efa;
    top: 80%;
    left: 17%;
    animation-duration: 47s;
    animation-delay: -34s;
    transform-origin: -10vw 11vh;
    box-shadow: 40vmin 0 5.2392900948264804vmin currentColor;
}