* {
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100vh;
  background-color: rgb(9, 4, 49);
}

.balls {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.balls span {
  position: absolute;
  display: flex;
}

.balls span:nth-child(1) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: circle(20%);
  background: red;
  box-shadow: 0px 0px 25px red;
  animation: move1 3s infinite linear;
}

.balls span:nth-child(2) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: circle(50%);
  background: blue;
  box-shadow: 0px 0px 25px blue;
  animation: move2 3s infinite linear;
}

@keyframes move1 {
  0% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
  }

  50% {
    background: green;
    box-shadow: 0px 0px 25px green;
  }

  75% {
    background: red;
    box-shadow: 0px 0px 25px red;
  }

  100% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
    offset-distance: 100%;
  }
}

@keyframes move2 {
  0% {
    background: red;
    box-shadow: 0px 0px 25px red;
  }

  50% {
    background: green;
    box-shadow: 0px 0px 25px green;
  }

  75% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
  }

  100% {
    background: red;
    box-shadow: 0px 0px 25px red;
    offset-distance: 100%;
  }
}

.balls span:nth-child(3) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(20% 50% at 33% 25%);
  background: yellow;
  box-shadow: 0px 0px 25px yellow;
  animation: move3 3s infinite linear;
}

.balls span:nth-child(4) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(33% 25% at 20% 50%);
  background: orange;
  box-shadow: 0px 0px 25px orange;
  animation: move4 3s infinite linear;
}

@keyframes move3 {
  0% {
    background: yellow;
    box-shadow: 0px 0px 25px yellow;
  }

  50% {
    background: orange;
    box-shadow: 0px 0px 25px orange;
  }

  75% {
    background: pink;
    box-shadow: 0px 0px 25px pink;
  }

  100% {
    background: yellow;
    box-shadow: 0px 0px 25px yellow;
    offset-distance: 100%;
  }
}

@keyframes move4 {
  0% {
    background: orange;
    box-shadow: 0px 0px 25px orange;
  }

  50% {
    background: pink;
    box-shadow: 0px 0px 25px pink;
  }

  75% {
    background: yellow;
    box-shadow: 0px 0px 25px yellow;
  }

  100% {
    background: orange;
    box-shadow: 0px 0px 25px orange;
    offset-distance: 100%;
  }
}

.balls span:nth-child(5) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(25rem 50% at right top);
  background: magenta;
  box-shadow: 0px 0px 25px magenta;
  animation: move5 3s infinite linear;
}

.balls span:nth-child(6) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(4rem 40% at right center);
  background: rgb(16, 147, 255);
  box-shadow: 0px 0px 25px rgb(16, 147, 255);
  animation: move6 3s infinite linear;
}

@keyframes move5 {
  0% {
    background: magenta;
    box-shadow: 0px 0px 25px magenta;
  }

  50% {
    background: rgb(64, 221, 16);
    box-shadow: 0px 0px 25px rgb(64, 221, 16);
  }

  75% {
    background: rgb(109, 46, 46);
    box-shadow: 0px 0px 25px rgb(109, 46, 46);
  }

  100% {
    background: magenta;
    box-shadow: 0px 0px 25px magenta;
    offset-distance: 100%;
  }
}

@keyframes move6 {
  0% {
    background: rgb(16, 147, 255);
    box-shadow: 0px 0px 25px rgb(16, 147, 255);
  }

  50% {
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 25px rgb(255, 255, 255);
  }

  75% {
    background: rgb(106, 255, 6);
    box-shadow: 0px 0px 25px rgb(106, 255, 6);
  }

  100% {
    background: rgb(16, 147, 255);
    box-shadow: 0px 0px 25px rgb(16, 147, 255);
    offset-distance: 100%;
  }
}

.balls span:nth-child(7) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(closest-side closest-side at 20em 12rem);
  background: blue;
  box-shadow: 0px 0px 25px blue;
  animation: move7 3s infinite linear;
}

.balls span:nth-child(8) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(closest-side closest-side at 15rem 13rem);
  background: red;
  box-shadow: 0px 0px 25px red;
  animation: move8 3s infinite linear;
}

@keyframes move7 {
  0% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
  }

  50% {
    background: rgb(192, 255, 44);
    box-shadow: 0px 0px 25px rgb(192, 255, 44);
  }

  75% {
    background: rgb(238, 0, 139);
    box-shadow: 0px 0px 25px rgb(238, 0, 139);
  }

  100% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
    offset-distance: 100%;
  }
}

@keyframes move8 {
  0% {
    background: red;
    box-shadow: 0px 0px 25px red;
  }

  50% {
    background: rgb(129, 223, 144);
    box-shadow: 0px 0px 25px rgb(129, 223, 144);
  }

  75% {
    background: rgb(230, 255, 6);
    box-shadow: 0px 0px 25px rgb(230, 255, 6);
  }

  100% {
    background: red;
    box-shadow: 0px 0px 25px red;
    offset-distance: 100%;
  }
}

.balls span:nth-child(9) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: ellipse(50rem 50% at right top);
  background: red;
  box-shadow: 0px 0px 25px red;
  animation: move9 3s infinite linear;
}

@keyframes move9 {
  0% {
    background: red;
    box-shadow: 0px 0px 25px red;
  }

  50% {
    background: rgb(129, 223, 144);
    box-shadow: 0px 0px 25px rgb(129, 223, 144);
  }

  75% {
    background: rgb(230, 255, 6);
    box-shadow: 0px 0px 25px rgb(230, 255, 6);
  }

  100% {
    background: red;
    box-shadow: 0px 0px 25px red;
    offset-distance: 100%;
  }
}

.balls span:nth-child(10) {
  width: 2vw;
  height: 4vh;
  border-radius: 50%;
  offset-path: path(
    "M20,700 A30,40,0,0,1,10,70 A40,40,0,0,1,180,70 Q1,130,100,190 Q1,130,2,700 Z"
  );
  background: blue;
  box-shadow: 0px 0px 25px blue;
  animation: move10 3s infinite linear;
}

@keyframes move10 {
  0% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
  }

  50% {
    background: rgb(192, 255, 44);
    box-shadow: 0px 0px 25px rgb(192, 255, 44);
  }

  75% {
    background: rgb(238, 0, 139);
    box-shadow: 0px 0px 25px rgb(238, 0, 139);
  }

  100% {
    background: blue;
    box-shadow: 0px 0px 25px blue;
    offset-distance: 100%;
  }
}