body {
  margin: 0;
  overflow: hidden;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #2e334e;
}

.background span {
  width: 40vmin;
  height: 40vmin;
  border-radius: 40vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #4B5267;
  top: 1%;
  left: 45%;
  animation-duration: 24.3s;
  animation-delay: -8.5s;
  transform-origin: -14vw -19vh;
  box-shadow: -80vmin 0 28.2443326778vmin currentColor;
}
.background span:nth-child(2) {
  color: #165779;
  top: 29%;
  left: 36%;
  animation-duration: 17.9s;
  animation-delay: -30.1s;
  transform-origin: -20vw -9vh;
  box-shadow: -80vmin 0 24.3753334948vmin currentColor;
}
.background span:nth-child(3) {
  color: #062737;
  top: 80%;
  left: 22%;
  animation-duration: 20.6s;
  animation-delay: -40.4s;
  transform-origin: 17vw -24vh;
  box-shadow: -80vmin 0 15.1267255847vmin currentColor;
}
.background span:nth-child(4) {
  color: #4B5267;
  top: 41%;
  left: 95%;
  animation-duration: 13.3s;
  animation-delay: -43.2s;
  transform-origin: 12vw 7vh;
  box-shadow: -80vmin 0 19.0761910256vmin currentColor;
}
.background span:nth-child(5) {
  color: #062737;
  top: 63%;
  left: 30%;
  animation-duration: 11s;
  animation-delay: -46.1s;
  transform-origin: -5vw 17vh;
  box-shadow: 80vmin 0 10.9818619061vmin currentColor;
}
.background span:nth-child(6) {
  color: #4B5267;
  top: 49%;
  left: 89%;
  animation-duration: 17.3s;
  animation-delay: -27.4s;
  transform-origin: 4vw 14vh;
  box-shadow: -80vmin 0 12.2628743486vmin currentColor;
}
.background span:nth-child(7) {
  color: #062737;
  top: 40%;
  left: 70%;
  animation-duration: 39s;
  animation-delay: -64.4s;
  transform-origin: -8vw 14vh;
  box-shadow: 80vmin 0 27.7781425614vmin currentColor;
}
.background span:nth-child(8) {
  color: #4B5267;
  top: 59%;
  left: 6%;
  animation-duration: 16.5s;
  animation-delay: -37.2s;
  transform-origin: 20vw 14vh;
  box-shadow: 80vmin 0 11.6902356312vmin currentColor;
}
.background span:nth-child(9) {
  color: #4B5267;
  top: 37%;
  left: 71%;
  animation-duration: 34.8s;
  animation-delay: -58.1s;
  transform-origin: 19vw -18vh;
  box-shadow: -80vmin 0 14.2584771925vmin currentColor;
}
.background span:nth-child(10) {
  color: #062737;
  top: 48%;
  left: 27%;
  animation-duration: 58.2s;
  animation-delay: -49.6s;
  transform-origin: -6vw 8vh;
  box-shadow: -80vmin 0 22.2257313697vmin currentColor;
}
.background span:nth-child(11) {
  color: #062737;
  top: 48%;
  left: 78%;
  animation-duration: 10.9s;
  animation-delay: -45.8s;
  transform-origin: -16vw -17vh;
  box-shadow: -80vmin 0 23.1264773476vmin currentColor;
}
.background span:nth-child(12) {
  color: #165779;
  top: 63%;
  left: 69%;
  animation-duration: 64.3s;
  animation-delay: -55.2s;
  transform-origin: -19vw 17vh;
  box-shadow: 80vmin 0 21.1200189482vmin currentColor;
}
.background span:nth-child(13) {
  color: #062737;
  top: 38%;
  left: 55%;
  animation-duration: 17.7s;
  animation-delay: -4.8s;
  transform-origin: 5vw 24vh;
  box-shadow: 80vmin 0 20.2595684155vmin currentColor;
}
.background span:nth-child(14) {
  color: #165779;
  top: 1%;
  left: 16%;
  animation-duration: 63s;
  animation-delay: -8.4s;
  transform-origin: -20vw -13vh;
  box-shadow: 80vmin 0 28.1699604566vmin currentColor;
}
.background span:nth-child(15) {
  color: #165779;
  top: 38%;
  left: 83%;
  animation-duration: 48s;
  animation-delay: -38.5s;
  transform-origin: -16vw -20vh;
  box-shadow: -80vmin 0 23.0472602492vmin currentColor;
}
.background span:nth-child(16) {
  color: #4B5267;
  top: 3%;
  left: 3%;
  animation-duration: 60.1s;
  animation-delay: -45.5s;
  transform-origin: -11vw -19vh;
  box-shadow: -80vmin 0 17.4461865597vmin currentColor;
}
.background span:nth-child(17) {
  color: #062737;
  top: 14%;
  left: 9%;
  animation-duration: 60.8s;
  animation-delay: -37.4s;
  transform-origin: -10vw -2vh;
  box-shadow: 80vmin 0 18.1699045717vmin currentColor;
}
.background span:nth-child(18) {
  color: #062737;
  top: 99%;
  left: 30%;
  animation-duration: 47.3s;
  animation-delay: -11.4s;
  transform-origin: 24vw 1vh;
  box-shadow: -80vmin 0 15.0464253741vmin currentColor;
}
.background span:nth-child(19) {
  color: #165779;
  top: 90%;
  left: 91%;
  animation-duration: 33.5s;
  animation-delay: -53.9s;
  transform-origin: -13vw -8vh;
  box-shadow: -80vmin 0 20.1578448174vmin currentColor;
}
.background span:nth-child(20) {
  color: #4B5267;
  top: 16%;
  left: 40%;
  animation-duration: 30.3s;
  animation-delay: -48.6s;
  transform-origin: 7vw 24vh;
  box-shadow: -80vmin 0 21.6833328004vmin currentColor;
}

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