body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #3E1E68;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #E45A84;
  top: 11%;
  left: 48%;
  animation-duration: 10.7s;
  animation-delay: -1.8s;
  transform-origin: 2vw -7vh;
  box-shadow: -40vmin 0 11.1098948185vmin currentColor;
}
.background span:nth-child(2) {
  color: #FFACAC;
  top: 16%;
  left: 57%;
  animation-duration: 12.4s;
  animation-delay: -11.3s;
  transform-origin: -5vw -13vh;
  box-shadow: -40vmin 0 12.589677099vmin currentColor;
}
.background span:nth-child(3) {
  color: #FFACAC;
  top: 29%;
  left: 33%;
  animation-duration: 10.3s;
  animation-delay: -13.3s;
  transform-origin: 18vw -2vh;
  box-shadow: 40vmin 0 6.211924239vmin currentColor;
}
.background span:nth-child(4) {
  color: #583C87;
  top: 50%;
  left: 85%;
  animation-duration: 11.9s;
  animation-delay: -8s;
  transform-origin: -7vw 14vh;
  box-shadow: -40vmin 0 5.9436959174vmin currentColor;
}
.background span:nth-child(5) {
  color: #583C87;
  top: 47%;
  left: 64%;
  animation-duration: 11.6s;
  animation-delay: -14.7s;
  transform-origin: -6vw -16vh;
  box-shadow: -40vmin 0 12.3966252281vmin currentColor;
}
.background span:nth-child(6) {
  color: #E45A84;
  top: 34%;
  left: 43%;
  animation-duration: 12.4s;
  animation-delay: -13.1s;
  transform-origin: 17vw -13vh;
  box-shadow: -40vmin 0 5.8517503601vmin currentColor;
}
.background span:nth-child(7) {
  color: #FFACAC;
  top: 9%;
  left: 32%;
  animation-duration: 13.8s;
  animation-delay: -8.1s;
  transform-origin: 11vw 2vh;
  box-shadow: -40vmin 0 5.1690748027vmin currentColor;
}
.background span:nth-child(8) {
  color: #E45A84;
  top: 40%;
  left: 55%;
  animation-duration: 15.4s;
  animation-delay: -1.2s;
  transform-origin: 17vw 20vh;
  box-shadow: -40vmin 0 12.6045107222vmin currentColor;
}
.background span:nth-child(9) {
  color: #FFACAC;
  top: 92%;
  left: 95%;
  animation-duration: 14.8s;
  animation-delay: -14.2s;
  transform-origin: -2vw -6vh;
  box-shadow: -40vmin 0 9.555508324vmin currentColor;
}
.background span:nth-child(10) {
  color: #FFACAC;
  top: 24%;
  left: 69%;
  animation-duration: 11.6s;
  animation-delay: -6.5s;
  transform-origin: -4vw 17vh;
  box-shadow: 40vmin 0 5.8837409553vmin currentColor;
}
.background span:nth-child(11) {
  color: #FFACAC;
  top: 16%;
  left: 77%;
  animation-duration: 10.1s;
  animation-delay: -12.3s;
  transform-origin: -9vw -17vh;
  box-shadow: -40vmin 0 6.3738015705vmin currentColor;
}
.background span:nth-child(12) {
  color: #E45A84;
  top: 99%;
  left: 74%;
  animation-duration: 13.9s;
  animation-delay: -10.8s;
  transform-origin: -7vw -15vh;
  box-shadow: 40vmin 0 12.5321491488vmin currentColor;
}
.background span:nth-child(13) {
  color: #FFACAC;
  top: 80%;
  left: 8%;
  animation-duration: 15.9s;
  animation-delay: -9.6s;
  transform-origin: 10vw -18vh;
  box-shadow: 40vmin 0 6.5458413423vmin currentColor;
}
.background span:nth-child(14) {
  color: #583C87;
  top: 41%;
  left: 64%;
  animation-duration: 14.6s;
  animation-delay: -11s;
  transform-origin: 4vw 16vh;
  box-shadow: -40vmin 0 5.0758950404vmin currentColor;
}
.background span:nth-child(15) {
  color: #583C87;
  top: 10%;
  left: 5%;
  animation-duration: 12.3s;
  animation-delay: -3.7s;
  transform-origin: 4vw 16vh;
  box-shadow: -40vmin 0 7.3287647899vmin currentColor;
}
.background span:nth-child(16) {
  color: #FFACAC;
  top: 43%;
  left: 68%;
  animation-duration: 13.6s;
  animation-delay: -15.5s;
  transform-origin: 3vw 16vh;
  box-shadow: 40vmin 0 7.6386487624vmin currentColor;
}
.background span:nth-child(17) {
  color: #FFACAC;
  top: 53%;
  left: 39%;
  animation-duration: 13.8s;
  animation-delay: -14.9s;
  transform-origin: -2vw 7vh;
  box-shadow: 40vmin 0 6.5253710261vmin currentColor;
}
.background span:nth-child(18) {
  color: #E45A84;
  top: 24%;
  left: 12%;
  animation-duration: 15.3s;
  animation-delay: -13.8s;
  transform-origin: -14vw -15vh;
  box-shadow: 40vmin 0 11.4366015778vmin currentColor;
}
.background span:nth-child(19) {
  color: #E45A84;
  top: 30%;
  left: 88%;
  animation-duration: 11.2s;
  animation-delay: -2.9s;
  transform-origin: -18vw 25vh;
  box-shadow: -40vmin 0 11.9442110398vmin currentColor;
}
.background span:nth-child(20) {
  color: #FFACAC;
  top: 22%;
  left: 52%;
  animation-duration: 15.3s;
  animation-delay: -13.9s;
  transform-origin: 14vw 7vh;
  box-shadow: -40vmin 0 11.1067032488vmin currentColor;
}

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