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

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

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


.background span:nth-child(0) {
    color: #190835;
    top: 23%;
    left: 40%;
    animation-duration: 25s;
    animation-delay: -66s;
    transform-origin: -11vw -18vh;
    box-shadow: -76vmin 0 9.786216042202708vmin currentColor;
}
.background span:nth-child(1) {
    color: #141548;
    top: 89%;
    left: 26%;
    animation-duration: 101s;
    animation-delay: -140s;
    transform-origin: 20vw -13vh;
    box-shadow: 76vmin 0 9.607763144742545vmin currentColor;
}
.background span:nth-child(2) {
    color: #190835;
    top: 40%;
    left: 86%;
    animation-duration: 107s;
    animation-delay: -10s;
    transform-origin: -2vw 13vh;
    box-shadow: 76vmin 0 10.394499698591709vmin currentColor;
}
.background span:nth-child(3) {
    color: #190835;
    top: 82%;
    left: 27%;
    animation-duration: 170s;
    animation-delay: -190s;
    transform-origin: -24vw -23vh;
    box-shadow: -76vmin 0 9.700619009222978vmin currentColor;
}
.background span:nth-child(4) {
    color: #252655;
    top: 28%;
    left: 64%;
    animation-duration: 82s;
    animation-delay: -172s;
    transform-origin: -7vw 23vh;
    box-shadow: -76vmin 0 9.689784240628558vmin currentColor;
}
.background span:nth-child(5) {
    color: #29082b;
    top: 61%;
    left: 71%;
    animation-duration: 132s;
    animation-delay: -29s;
    transform-origin: -7vw -6vh;
    box-shadow: -76vmin 0 9.782807619192184vmin currentColor;
}
.background span:nth-child(6) {
    color: #252655;
    top: 20%;
    left: 43%;
    animation-duration: 135s;
    animation-delay: -37s;
    transform-origin: -19vw 17vh;
    box-shadow: -76vmin 0 9.589956623434066vmin currentColor;
}
.background span:nth-child(7) {
    color: #1c0854;
    top: 87%;
    left: 95%;
    animation-duration: 222s;
    animation-delay: -27s;
    transform-origin: -17vw 2vh;
    box-shadow: 76vmin 0 9.969269140947887vmin currentColor;
}
.background span:nth-child(8) {
    color: #190835;
    top: 80%;
    left: 6%;
    animation-duration: 136s;
    animation-delay: -89s;
    transform-origin: -9vw -5vh;
    box-shadow: 76vmin 0 10.446639519781412vmin currentColor;
}
.background span:nth-child(9) {
    color: #1c0854;
    top: 90%;
    left: 85%;
    animation-duration: 132s;
    animation-delay: -190s;
    transform-origin: -9vw 3vh;
    box-shadow: 76vmin 0 10.399972467678868vmin currentColor;
}
.background span:nth-child(10) {
    color: #1c0854;
    top: 98%;
    left: 72%;
    animation-duration: 193s;
    animation-delay: -62s;
    transform-origin: 4vw 5vh;
    box-shadow: 76vmin 0 9.865201873261464vmin currentColor;
}
.background span:nth-child(11) {
    color: #252655;
    top: 100%;
    left: 90%;
    animation-duration: 149s;
    animation-delay: -35s;
    transform-origin: -21vw -14vh;
    box-shadow: 76vmin 0 10.19410378773611vmin currentColor;
}
.background span:nth-child(12) {
    color: #252655;
    top: 97%;
    left: 67%;
    animation-duration: 7s;
    animation-delay: -218s;
    transform-origin: 25vw -7vh;
    box-shadow: 76vmin 0 10.34107165923368vmin currentColor;
}
.background span:nth-child(13) {
    color: #29082b;
    top: 52%;
    left: 15%;
    animation-duration: 53s;
    animation-delay: -161s;
    transform-origin: -24vw -2vh;
    box-shadow: -76vmin 0 10.355521641257921vmin currentColor;
}
.background span:nth-child(14) {
    color: #252655;
    top: 59%;
    left: 52%;
    animation-duration: 64s;
    animation-delay: -98s;
    transform-origin: -13vw 20vh;
    box-shadow: 76vmin 0 9.627746462410437vmin currentColor;
}
.background span:nth-child(15) {
    color: #252655;
    top: 19%;
    left: 50%;
    animation-duration: 109s;
    animation-delay: -8s;
    transform-origin: -21vw 5vh;
    box-shadow: -76vmin 0 9.650446495499889vmin currentColor;
}
.background span:nth-child(16) {
    color: #190835;
    top: 45%;
    left: 26%;
    animation-duration: 8s;
    animation-delay: -109s;
    transform-origin: -14vw 22vh;
    box-shadow: -76vmin 0 10.330339998488109vmin currentColor;
}
.background span:nth-child(17) {
    color: #190835;
    top: 56%;
    left: 76%;
    animation-duration: 154s;
    animation-delay: -163s;
    transform-origin: 22vw 22vh;
    box-shadow: 76vmin 0 10.4787178016423vmin currentColor;
}
.background span:nth-child(18) {
    color: #252655;
    top: 100%;
    left: 10%;
    animation-duration: 83s;
    animation-delay: -99s;
    transform-origin: 23vw 12vh;
    box-shadow: -76vmin 0 10.405276019598672vmin currentColor;
}
.background span:nth-child(19) {
    color: #1c0854;
    top: 97%;
    left: 81%;
    animation-duration: 37s;
    animation-delay: -157s;
    transform-origin: 13vw -16vh;
    box-shadow: -76vmin 0 10.327346472727195vmin currentColor;
}
.background span:nth-child(20) {
    color: #190835;
    top: 33%;
    left: 4%;
    animation-duration: 119s;
    animation-delay: -46s;
    transform-origin: -1vw -1vh;
    box-shadow: 76vmin 0 10.100094984496616vmin currentColor;
}