body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #1B2A3A;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.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: #38577C;
  top: 11%;
  left: 78%;
  animation-duration: 10.5s;
  animation-delay: -0.6s;
  transform-origin: 15vw -3vh;
  box-shadow: 40vmin 0 9.2169560437vmin currentColor;
}

.background span:nth-child(2) {
  color: #314D6E;
  top: 18%;
  left: 70%;
  animation-duration: 10.8s;
  animation-delay: -11.1s;
  transform-origin: 14vw -3vh;
  box-shadow: 40vmin 0 10.8409375365vmin currentColor;
}

.background span:nth-child(3) {
  color: #38577C;
  top: 21%;
  left: 1%;
  animation-duration: 15.2s;
  animation-delay: -7.6s;
  transform-origin: 6vw 9vh;
  box-shadow: -40vmin 0 14.0499403812vmin currentColor;
}

.background span:nth-child(4) {
  color: #314D6E;
  top: 35%;
  left: 87%;
  animation-duration: 14.6s;
  animation-delay: -6.8s;
  transform-origin: 9vw -4vh;
  box-shadow: -40vmin 0 5.5106977723vmin currentColor;
}

.background span:nth-child(5) {
  color: #38577C;
  top: 99%;
  left: 74%;
  animation-duration: 13.3s;
  animation-delay: -0.2s;
  transform-origin: 7vw -11vh;
  box-shadow: 40vmin 0 8.1209516245vmin currentColor;
}

.background span:nth-child(6) {
  color: #273D57;
  top: 32%;
  left: 88%;
  animation-duration: 10.3s;
  animation-delay: -1.1s;
  transform-origin: 4vw -11vh;
  box-shadow: 40vmin 0 8.4994713495vmin currentColor;
}

.background span:nth-child(7) {
  color: #314D6E;
  top: 61%;
  left: 93%;
  animation-duration: 12.2s;
  animation-delay: -11.9s;
  transform-origin: -3vw 6vh;
  box-shadow: -40vmin 0 13.820943777vmin currentColor;
}

.background span:nth-child(8) {
  color: #38577C;
  top: 40%;
  left: 6%;
  animation-duration: 14.8s;
  animation-delay: -5s;
  transform-origin: -18vw 13vh;
  box-shadow: -40vmin 0 13.7677854044vmin currentColor;
}

.background span:nth-child(9) {
  color: #314D6E;
  top: 36%;
  left: 94%;
  animation-duration: 11.3s;
  animation-delay: -5.9s;
  transform-origin: 8vw 22vh;
  box-shadow: -40vmin 0 8.6795387927vmin currentColor;
}

.background span:nth-child(10) {
  color: #38577C;
  top: 81%;
  left: 26%;
  animation-duration: 12.6s;
  animation-delay: -12.6s;
  transform-origin: 6vw -3vh;
  box-shadow: 40vmin 0 13.0465663472vmin currentColor;
}

.background span:nth-child(11) {
  color: #38577C;
  top: 35%;
  left: 25%;
  animation-duration: 11.9s;
  animation-delay: -0.1s;
  transform-origin: -21vw -2vh;
  box-shadow: 40vmin 0 11.7620049631vmin currentColor;
}

.background span:nth-child(12) {
  color: #314D6E;
  top: 64%;
  left: 57%;
  animation-duration: 14.4s;
  animation-delay: -2.7s;
  transform-origin: 21vw 9vh;
  box-shadow: 40vmin 0 11.5718753443vmin currentColor;
}

.background span:nth-child(13) {
  color: #314D6E;
  top: 89%;
  left: 86%;
  animation-duration: 10.1s;
  animation-delay: -2.9s;
  transform-origin: 24vw -18vh;
  box-shadow: -40vmin 0 14.7952657424vmin currentColor;
}

.background span:nth-child(14) {
  color: #273D57;
  top: 42%;
  left: 60%;
  animation-duration: 12s;
  animation-delay: -11.1s;
  transform-origin: 15vw 22vh;
  box-shadow: 40vmin 0 7.4066061002vmin currentColor;
}

.background span:nth-child(15) {
  color: #38577C;
  top: 27%;
  left: 93%;
  animation-duration: 12.5s;
  animation-delay: -6.7s;
  transform-origin: -1vw 20vh;
  box-shadow: -40vmin 0 8.4842825594vmin currentColor;
}

.background span:nth-child(16) {
  color: #38577C;
  top: 79%;
  left: 15%;
  animation-duration: 13.9s;
  animation-delay: -7.9s;
  transform-origin: -3vw -2vh;
  box-shadow: 40vmin 0 10.6242281665vmin currentColor;
}

.background span:nth-child(17) {
  color: #273D57;
  top: 44%;
  left: 33%;
  animation-duration: 12.8s;
  animation-delay: -6.7s;
  transform-origin: 5vw -23vh;
  box-shadow: 40vmin 0 12.4757238953vmin currentColor;
}

.background span:nth-child(18) {
  color: #314D6E;
  top: 68%;
  left: 3%;
  animation-duration: 14.3s;
  animation-delay: -6.4s;
  transform-origin: 22vw -22vh;
  box-shadow: -40vmin 0 13.339107562vmin currentColor;
}

.background span:nth-child(19) {
  color: #38577C;
  top: 64%;
  left: 70%;
  animation-duration: 13.4s;
  animation-delay: -9s;
  transform-origin: 6vw -19vh;
  box-shadow: -40vmin 0 11.4881722326vmin currentColor;
}

.background span:nth-child(20) {
  color: #314D6E;
  top: 88%;
  left: 27%;
  animation-duration: 14.2s;
  animation-delay: -7.9s;
  transform-origin: 15vw -8vh;
  box-shadow: 40vmin 0 5.6437371239vmin currentColor;
}

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