.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: #FFACAC;
  top: 73%;
  left: 95%;
  animation-duration: 11.8s;
  animation-delay: -12.7s;
  transform-origin: 4vw 11vh;
  box-shadow: -40vmin 0 14.6930055283vmin currentColor;
}
.background span:nth-child(2) {
  color: #FFACAC;
  top: 50%;
  left: 15%;
  animation-duration: 10.4s;
  animation-delay: -14.5s;
  transform-origin: 10vw -8vh;
  box-shadow: 40vmin 0 6.7044488761vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 100%;
  left: 91%;
  animation-duration: 10.4s;
  animation-delay: -11.5s;
  transform-origin: 5vw 13vh;
  box-shadow: 40vmin 0 12.8718554656vmin currentColor;
}
.background span:nth-child(4) {
  color: #FFACAC;
  top: 96%;
  left: 83%;
  animation-duration: 15.9s;
  animation-delay: -5.6s;
  transform-origin: 3vw -9vh;
  box-shadow: -40vmin 0 7.4268755493vmin currentColor;
}
.background span:nth-child(5) {
  color: #583C87;
  top: 11%;
  left: 40%;
  animation-duration: 10.7s;
  animation-delay: -10.9s;
  transform-origin: -22vw 3vh;
  box-shadow: -40vmin 0 9.1010651474vmin currentColor;
}
.background span:nth-child(6) {
  color: #FFACAC;
  top: 39%;
  left: 75%;
  animation-duration: 12.3s;
  animation-delay: -13.9s;
  transform-origin: 3vw 3vh;
  box-shadow: 40vmin 0 12.3173189773vmin currentColor;
}
.background span:nth-child(7) {
  color: #583C87;
  top: 3%;
  left: 13%;
  animation-duration: 14.1s;
  animation-delay: -6.1s;
  transform-origin: 19vw -3vh;
  box-shadow: -40vmin 0 6.7602559552vmin currentColor;
}
.background span:nth-child(8) {
  color: #FFACAC;
  top: 59%;
  left: 88%;
  animation-duration: 11s;
  animation-delay: -14s;
  transform-origin: 15vw -3vh;
  box-shadow: -40vmin 0 7.6142143363vmin currentColor;
}
.background span:nth-child(9) {
  color: #FFACAC;
  top: 87%;
  left: 73%;
  animation-duration: 13.7s;
  animation-delay: -10.5s;
  transform-origin: -2vw 13vh;
  box-shadow: 40vmin 0 9.4905993631vmin currentColor;
}
.background span:nth-child(10) {
  color: #FFACAC;
  top: 57%;
  left: 68%;
  animation-duration: 12s;
  animation-delay: -11.1s;
  transform-origin: 16vw 17vh;
  box-shadow: 40vmin 0 13.0119397834vmin currentColor;
}
.background span:nth-child(11) {
  color: #583C87;
  top: 82%;
  left: 71%;
  animation-duration: 11.5s;
  animation-delay: -0.5s;
  transform-origin: -14vw -17vh;
  box-shadow: -40vmin 0 12.4592636651vmin currentColor;
}
.background span:nth-child(12) {
  color: #583C87;
  top: 45%;
  left: 52%;
  animation-duration: 15.5s;
  animation-delay: -9.8s;
  transform-origin: 5vw -13vh;
  box-shadow: -40vmin 0 5.7191440557vmin currentColor;
}
.background span:nth-child(13) {
  color: #E45A84;
  top: 22%;
  left: 36%;
  animation-duration: 15s;
  animation-delay: -12.8s;
  transform-origin: -16vw 4vh;
  box-shadow: 40vmin 0 13.9672192028vmin currentColor;
}
.background span:nth-child(14) {
  color: #E45A84;
  top: 26%;
  left: 1%;
  animation-duration: 13.7s;
  animation-delay: -12.4s;
  transform-origin: -3vw 0vh;
  box-shadow: -40vmin 0 12.0603716676vmin currentColor;
}
.background span:nth-child(15) {
  color: #583C87;
  top: 70%;
  left: 34%;
  animation-duration: 12.4s;
  animation-delay: -9.7s;
  transform-origin: 9vw -22vh;
  box-shadow: 40vmin 0 14.7480364943vmin currentColor;
}
.background span:nth-child(16) {
  color: #583C87;
  top: 18%;
  left: 71%;
  animation-duration: 11.8s;
  animation-delay: -0.7s;
  transform-origin: 21vw -24vh;
  box-shadow: 40vmin 0 7.4953799277vmin currentColor;
}
.background span:nth-child(17) {
  color: #E45A84;
  top: 22%;
  left: 97%;
  animation-duration: 15.8s;
  animation-delay: -4.3s;
  transform-origin: 11vw 6vh;
  box-shadow: 40vmin 0 13.8758085292vmin currentColor;
}
.background span:nth-child(18) {
  color: #583C87;
  top: 83%;
  left: 59%;
  animation-duration: 15s;
  animation-delay: -11.1s;
  transform-origin: -12vw -20vh;
  box-shadow: 40vmin 0 11.7358428366vmin currentColor;
}
.background span:nth-child(19) {
  color: #FFACAC;
  top: 97%;
  left: 66%;
  animation-duration: 12.4s;
  animation-delay: -13.8s;
  transform-origin: -9vw 7vh;
  box-shadow: -40vmin 0 12.1365022478vmin currentColor;
}
.background span:nth-child(20) {
  color: #E45A84;
  top: 9%;
  left: 38%;
  animation-duration: 13.5s;
  animation-delay: -3.2s;
  transform-origin: -6vw -17vh;
  box-shadow: 40vmin 0 9.2501425183vmin currentColor;
}

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