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

.background {
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  background: #111827;
  overflow: hidden;
}

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

.background span:nth-child(0) {
  color: #7e22ce;
  top: 67%;
  left: 63%;
  animation-duration: 49s;
  animation-delay: -40s;
  transform-origin: -1vw -12vh;
  box-shadow: 20vmin 0 3.1675332641342875vmin currentColor;
}
.background span:nth-child(1) {
  color: #0942c8;
  top: 41%;
  left: 46%;
  animation-duration: 69s;
  animation-delay: -14s;
  transform-origin: 17vw -17vh;
  box-shadow: -20vmin 0 3.43765962340059vmin currentColor;
}
.background span:nth-child(2) {
  color: #0942c8;
  top: 85%;
  left: 38%;
  animation-duration: 46s;
  animation-delay: -69s;
  transform-origin: 12vw -22vh;
  box-shadow: -20vmin 0 3.111065766415292vmin currentColor;
}
.background span:nth-child(3) {
  color: #7e22ce;
  top: 70%;
  left: 76%;
  animation-duration: 19s;
  animation-delay: -57s;
  transform-origin: -11vw 2vh;
  box-shadow: 20vmin 0 2.8106760451609243vmin currentColor;
}
.background span:nth-child(4) {
  color: #0942c8;
  top: 36%;
  left: 95%;
  animation-duration: 52s;
  animation-delay: -54s;
  transform-origin: 9vw 12vh;
  box-shadow: 20vmin 0 3.119116610234034vmin currentColor;
}
.background span:nth-child(5) {
  color: #cc1e1e;
  top: 29%;
  left: 70%;
  animation-duration: 75s;
  animation-delay: -36s;
  transform-origin: 15vw -14vh;
  box-shadow: -20vmin 0 2.8566145485509837vmin currentColor;
}
.background span:nth-child(6) {
  color: #7e22ce;
  top: 66%;
  left: 43%;
  animation-duration: 39s;
  animation-delay: -57s;
  transform-origin: 10vw 24vh;
  box-shadow: -20vmin 0 2.851888187457903vmin currentColor;
}
.background span:nth-child(7) {
  color: #7e22ce;
  top: 72%;
  left: 77%;
  animation-duration: 62s;
  animation-delay: -45s;
  transform-origin: -22vw 0vh;
  box-shadow: 20vmin 0 3.062840924030374vmin currentColor;
}
.background span:nth-child(8) {
  color: #cc1e1e;
  top: 52%;
  left: 25%;
  animation-duration: 67s;
  animation-delay: -48s;
  transform-origin: 22vw 19vh;
  box-shadow: -20vmin 0 2.7916117283529256vmin currentColor;
}
.background span:nth-child(9) {
  color: #7e22ce;
  top: 96%;
  left: 65%;
  animation-duration: 7s;
  animation-delay: -14s;
  transform-origin: -7vw -11vh;
  box-shadow: 20vmin 0 2.9511787214852547vmin currentColor;
}
.background span:nth-child(10) {
  color: #cc1e1e;
  top: 37%;
  left: 87%;
  animation-duration: 13s;
  animation-delay: -10s;
  transform-origin: -17vw -21vh;
  box-shadow: -20vmin 0 3.3664178741159345vmin currentColor;
}
.background span:nth-child(11) {
  color: #0942c8;
  top: 51%;
  left: 62%;
  animation-duration: 74s;
  animation-delay: -35s;
  transform-origin: -20vw -4vh;
  box-shadow: 20vmin 0 3.1452138251703277vmin currentColor;
}
.background span:nth-child(12) {
  color: #7e22ce;
  top: 58%;
  left: 9%;
  animation-duration: 18s;
  animation-delay: -18s;
  transform-origin: -13vw -19vh;
  box-shadow: 20vmin 0 2.5343731860140872vmin currentColor;
}
.background span:nth-child(13) {
  color: #7e22ce;
  top: 14%;
  left: 66%;
  animation-duration: 57s;
  animation-delay: -39s;
  transform-origin: 8vw 21vh;
  box-shadow: -20vmin 0 3.2643663289491234vmin currentColor;
}
.background span:nth-child(14) {
  color: #0942c8;
  top: 27%;
  left: 34%;
  animation-duration: 11s;
  animation-delay: -22s;
  transform-origin: -24vw 24vh;
  box-shadow: -20vmin 0 2.572484359655902vmin currentColor;
}
.background span:nth-child(15) {
  color: #cc1e1e;
  top: 4%;
  left: 86%;
  animation-duration: 73s;
  animation-delay: -26s;
  transform-origin: 13vw -2vh;
  box-shadow: 20vmin 0 3.0365832117176246vmin currentColor;
}
.background span:nth-child(16) {
  color: #0942c8;
  top: 16%;
  left: 89%;
  animation-duration: 55s;
  animation-delay: -48s;
  transform-origin: 0vw -2vh;
  box-shadow: 20vmin 0 2.9569274767399163vmin currentColor;
}
.background span:nth-child(17) {
  color: #0942c8;
  top: 36%;
  left: 8%;
  animation-duration: 18s;
  animation-delay: -29s;
  transform-origin: 18vw 17vh;
  box-shadow: 20vmin 0 2.562850009961264vmin currentColor;
}
.background span:nth-child(18) {
  color: #0942c8;
  top: 83%;
  left: 71%;
  animation-duration: 11s;
  animation-delay: -57s;
  transform-origin: -6vw -6vh;
  box-shadow: 20vmin 0 3.0893520824398677vmin currentColor;
}
.background span:nth-child(19) {
  color: #cc1e1e;
  top: 58%;
  left: 98%;
  animation-duration: 6s;
  animation-delay: -68s;
  transform-origin: -20vw 3vh;
  box-shadow: 20vmin 0 3.3422096120243294vmin currentColor;
}
.background span:nth-child(20) {
  color: #0942c8;
  top: 1%;
  left: 50%;
  animation-duration: 74s;
  animation-delay: -5s;
  transform-origin: -17vw -4vh;
  box-shadow: 20vmin 0 2.5059988797839696vmin currentColor;
}
.background span:nth-child(21) {
  color: #0942c8;
  top: 75%;
  left: 75%;
  animation-duration: 17s;
  animation-delay: -60s;
  transform-origin: 10vw -15vh;
  box-shadow: 20vmin 0 2.6191665533789044vmin currentColor;
}
.background span:nth-child(22) {
  color: #0942c8;
  top: 54%;
  left: 83%;
  animation-duration: 46s;
  animation-delay: -28s;
  transform-origin: -15vw 1vh;
  box-shadow: -20vmin 0 2.7553011115179826vmin currentColor;
}
.background span:nth-child(23) {
  color: #cc1e1e;
  top: 68%;
  left: 68%;
  animation-duration: 52s;
  animation-delay: -11s;
  transform-origin: 12vw 13vh;
  box-shadow: -20vmin 0 2.891231465970572vmin currentColor;
}
.background span:nth-child(24) {
  color: #0942c8;
  top: 33%;
  left: 98%;
  animation-duration: 32s;
  animation-delay: -13s;
  transform-origin: -7vw -6vh;
  box-shadow: 20vmin 0 3.3875452159869974vmin currentColor;
}