.text {
  font-family: cursive;
  font-size: 3rem;
  color: navajowhite;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #1f1e67;
    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: #FFACAC;
    top: 61%;
    left: 14%;
    animation-duration: 9s;
    animation-delay: -10s;
    transform-origin: -2vw -19vh;
    box-shadow: -40vmin 0 5.961255025173188vmin currentColor;
}
.background span:nth-child(1) {
    color: #E45A84;
    top: 19%;
    left: 83%;
    animation-duration: 28s;
    animation-delay: -11s;
    transform-origin: 3vw 0vh;
    box-shadow: -40vmin 0 5.887972243311948vmin currentColor;
}
.background span:nth-child(2) {
    color: #E45A84;
    top: 32%;
    left: 2%;
    animation-duration: 47s;
    animation-delay: -37s;
    transform-origin: 9vw 14vh;
    box-shadow: -40vmin 0 5.360901379483474vmin currentColor;
}
.background span:nth-child(3) {
    color: #583C87;
    top: 89%;
    left: 25%;
    animation-duration: 30s;
    animation-delay: -21s;
    transform-origin: 0vw 18vh;
    box-shadow: -40vmin 0 5.975840015460086vmin currentColor;
}
.background span:nth-child(4) {
    color: #E45A84;
    top: 19%;
    left: 81%;
    animation-duration: 35s;
    animation-delay: -25s;
    transform-origin: 9vw -24vh;
    box-shadow: 40vmin 0 5.8910585985693675vmin currentColor;
}
.background span:nth-child(5) {
    color: #E45A84;
    top: 17%;
    left: 3%;
    animation-duration: 24s;
    animation-delay: -25s;
    transform-origin: 13vw 18vh;
    box-shadow: -40vmin 0 5.951263417306548vmin currentColor;
}
.background span:nth-child(6) {
    color: #FFACAC;
    top: 13%;
    left: 80%;
    animation-duration: 22s;
    animation-delay: -4s;
    transform-origin: 7vw 1vh;
    box-shadow: 40vmin 0 5.83893072207278vmin currentColor;
}
.background span:nth-child(7) {
    color: #E45A84;
    top: 64%;
    left: 92%;
    animation-duration: 25s;
    animation-delay: -25s;
    transform-origin: -15vw -17vh;
    box-shadow: 40vmin 0 5.1103104482563095vmin currentColor;
}
.background span:nth-child(8) {
    color: #E45A84;
    top: 57%;
    left: 86%;
    animation-duration: 45s;
    animation-delay: -15s;
    transform-origin: 1vw 18vh;
    box-shadow: -40vmin 0 5.241283941528431vmin currentColor;
}
.background span:nth-child(9) {
    color: #583C87;
    top: 30%;
    left: 35%;
    animation-duration: 9s;
    animation-delay: -5s;
    transform-origin: -15vw -15vh;
    box-shadow: 40vmin 0 5.019613993580263vmin currentColor;
}
.background span:nth-child(10) {
    color: #FFACAC;
    top: 9%;
    left: 71%;
    animation-duration: 53s;
    animation-delay: -29s;
    transform-origin: 20vw 15vh;
    box-shadow: 40vmin 0 5.648888296074864vmin currentColor;
}
.background span:nth-child(11) {
    color: #E45A84;
    top: 59%;
    left: 57%;
    animation-duration: 29s;
    animation-delay: -44s;
    transform-origin: -1vw -15vh;
    box-shadow: -40vmin 0 5.812836949598032vmin currentColor;
}
.background span:nth-child(12) {
    color: #E45A84;
    top: 49%;
    left: 55%;
    animation-duration: 17s;
    animation-delay: -6s;
    transform-origin: -2vw -9vh;
    box-shadow: 40vmin 0 5.670019099554096vmin currentColor;
}
.background span:nth-child(13) {
    color: #E45A84;
    top: 71%;
    left: 40%;
    animation-duration: 31s;
    animation-delay: -6s;
    transform-origin: -23vw 21vh;
    box-shadow: -40vmin 0 5.353167859695485vmin currentColor;
}
.background span:nth-child(14) {
    color: #FFACAC;
    top: 63%;
    left: 35%;
    animation-duration: 47s;
    animation-delay: -14s;
    transform-origin: 19vw -2vh;
    box-shadow: 40vmin 0 5.547216906492211vmin currentColor;
}
.background span:nth-child(15) {
    color: #E45A84;
    top: 73%;
    left: 29%;
    animation-duration: 50s;
    animation-delay: -35s;
    transform-origin: 16vw -4vh;
    box-shadow: 40vmin 0 5.671159507563136vmin currentColor;
}
.background span:nth-child(16) {
    color: #583C87;
    top: 93%;
    left: 74%;
    animation-duration: 40s;
    animation-delay: -42s;
    transform-origin: 25vw -7vh;
    box-shadow: 40vmin 0 5.94967083113635vmin currentColor;
}
.background span:nth-child(17) {
    color: #FFACAC;
    top: 26%;
    left: 65%;
    animation-duration: 37s;
    animation-delay: -1s;
    transform-origin: 12vw -6vh;
    box-shadow: -40vmin 0 5.736655041533303vmin currentColor;
}
.background span:nth-child(18) {
    color: #E45A84;
    top: 16%;
    left: 87%;
    animation-duration: 45s;
    animation-delay: -28s;
    transform-origin: 23vw -6vh;
    box-shadow: -40vmin 0 5.115405882607195vmin currentColor;
}
.background span:nth-child(19) {
    color: #583C87;
    top: 50%;
    left: 68%;
    animation-duration: 45s;
    animation-delay: -40s;
    transform-origin: 5vw -22vh;
    box-shadow: 40vmin 0 5.495189061882995vmin currentColor;
}