.gyro_inner {
  /* background: gold; */
  height: 60px;
  width: 250px;
  position: relative;
  overflow: hidden;
}

.circle {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: white;
  opacity: 0%;
  position: absolute;
}

#c1 {
  left: -25px;
  width: 35px;
  top: -30px;
  opacity: 50%;
  animation: driftOne 8s infinite linear;
}

#c2 {
  left: -5px;
  width: 73px;
  top: -15px;
  opacity: 30%;
  animation: driftTwo 8s infinite alternate linear;
}

#c3 {
  left: 43px;
  width: 15px;
  top: 25px;
  opacity: 70%;
  animation: driftThree 12s infinite alternate linear;
}

#c4 {
  left: 70px;
  width: 60px;
  top: -27px;
  opacity: 30%;
  animation: driftFour 8s infinite alternate linear;
}

#c5 {
  left: 110px;
  width: 35px;
  top: 33px;
  opacity: 40%;
  animation: driftFive 8s infinite alternate linear;
}

#c6 {
  left: 125px;
  width: 20px;
  top: -10px;
  opacity: 60%;
  animation: driftSix 8s infinite alternate linear;
}

#c7 {
  left: 157px;
  width: 35px;
  top: 10px;
  opacity: 55%;
  animation: driftSeven 10s infinite alternate linear;
}

#c8 {
  left: 165px;
  width: 15px;
  top: -8px;
  opacity: 70%;
  animation: driftEight 10s infinite alternate linear;
}

#c9 {
  left: 183px;
  width: 38px;
  top: -14px;
  opacity: 55%;
  animation: driftNine 9s infinite alternate linear;
}

#c10 {
  left: 200px;
  width: 50px;
  top: 20px;
  opacity: 40%;
  animation: driftTen 8s infinite alternate linear;
}

#c11 {
  left: 202px;
  width: 20px;
  top: 40px;
  opacity: 40%;
  animation: driftEleven 7s infinite alternate linear;
}

@keyframes driftOne {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(100px, 25px);
  }
  100% {
    transform: translate(290px, 35px);
  }
}

@keyframes driftTwo {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(10px, -25px);
  }
  50% {
    transform: translate(20px, -30px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-5px, 20px);
  }
}

@keyframes driftThree {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(100px, -10px);
  }
  50% {
    transform: translate(220px, 15px);
  }
  75% {
    transform: translate(100px, 25px);
  }
  100% {
    transform: translate(-70px, 10px);
  }
}

@keyframes driftFour {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(15px, -10px);
  }
  50% {
    transform: translate(25px, 10px);
  }
  75% {
    transform: translate(30px, 5px);
  }
  100% {
    transform: translate(15px, 15px);
  }
}

@keyframes driftFive {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(-0.6px, 14.6px);
  }
  100% {
    transform: translate(-0.7px, 17.7px);
  }
}

@keyframes driftSix {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25.1px, 9.5px);
  }
  50% {
    transform: translate(51.5px, 9.7px);
  }
  75% {
    transform: translate(30.5px, -1.4px);
  }
  100% {
    transform: translate(15.2px, 10px);
  }
}

@keyframes driftSeven {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(11.6px, -10.3px);
  }
  50% {
    transform: translate(3.6px, 3.5px);
  }
  75% {
    transform: translate(-3.1px, 7px);
  }
  100% {
    transform: translate(10.3px, 5.4px);
  }
}

@keyframes driftEight {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-5.6px, 10.2px);
  }
  50% {
    transform: translate(11.1px, -0.5px);
  }
  75% {
    transform: translate(29.2px, 15.8px);
  }
  100% {
    transform: translate(35.6px, 17.5px);
  }
}

@keyframes driftNine {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(11.2px, -18.6px);
  }
  50% {
    transform: translate(53px, -11.8px);
  }
  75% {
    transform: translate(60.2px, 21.1px);
  }
  100% {
    transform: translate(42.4px, -12.3px);
  }
}

@keyframes driftTen {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-28.6px, -4.2px);
  }
  50% {
    transform: translate(-4.8px, 3.9px);
  }
  75% {
    transform: translate(49.6px, 20.9px);
  }
  100% {
    transform: translate(40.3px, 24.6px);
  }
}

@keyframes driftEleven {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(29.9px, 24.1px);
  }
  100% {
    transform: translate(-13.1px, 4.1px);
  }
}