.ball {
  position: absolute;
  inset: -8em;
  #background-image: radial-gradient(circle at top, #fff, #000);
  border-radius: 50%;
  box-shadow: 0 0 2em #000a;
  #background:#ebecec;
}

.ball img{
    margin-top:50px;
}

.ring {
  position: absolute;
}
.ring i {
  position: absolute;
  border: 1px solid #fff;
  #box-shadow: 0 0 1em hsl(var(--hue), 100%, 75%) inset, 0 0 1em hsl(var(--hue), 100%, 75%);
  border-radius: 50%;
  -webkit-animation: iMove 24s var(--delay) infinite both linear, iScale 24s var(--delay) infinite both cubic-bezier(0.3642, 0, 0.6358, 1);
          animation: iMove 24s var(--delay) infinite both linear, iScale 24s var(--delay) infinite both cubic-bezier(0.3642, 0, 0.6358, 1);
		  
}
.ring i:nth-child(1) {
  --delay: 0s;
  --hue: 0;
  --rx: 79deg;
  --ry: 346deg;
  --rz: 354deg;
}
.ring i:nth-child(2) {
  --delay: -0.75s;
  --hue: 98;
  --rx: 123deg;
  --ry: 206deg;
  --rz: 11deg;
}
.ring i:nth-child(3) {
  --delay: -1.5s;
  --hue: 196;
  --rx: 51deg;
  --ry: 341deg;
  --rz: 267deg;
}
.ring i:nth-child(4) {
  --delay: -2.25s;
  --hue: 294;
  --rx: 210deg;
  --ry: 173deg;
  --rz: 316deg;
}
.ring i:nth-child(5) {
  --delay: -3s;
  --hue: 392;
  --rx: 319deg;
  --ry: 14deg;
  --rz: 187deg;
}
.ring i:nth-child(6) {
  --delay: -3.75s;
  --hue: 490;
  --rx: 18deg;
  --ry: 270deg;
  --rz: 277deg;
}
.ring i:nth-child(7) {
  --delay: -4.5s;
  --hue: 588;
  --rx: 220deg;
  --ry: 214deg;
  --rz: 271deg;
}
.ring i:nth-child(8) {
  --delay: -5.25s;
  --hue: 686;
  --rx: 45deg;
  --ry: 31deg;
  --rz: 76deg;
}
.ring i:nth-child(9) {
  --delay: -6s;
  --hue: 784;
  --rx: 100deg;
  --ry: 154deg;
  --rz: 13deg;
}
.ring i:nth-child(10) {
  --delay: -6.75s;
  --hue: 882;
  --rx: 144deg;
  --ry: 305deg;
  --rz: 211deg;
}
.ring i:nth-child(11) {
  --delay: -7.5s;
  --hue: 980;
  --rx: 58deg;
  --ry: 265deg;
  --rz: 149deg;
}
.ring i:nth-child(12) {
  --delay: -8.25s;
  --hue: 1078;
  --rx: 291deg;
  --ry: 26deg;
  --rz: 23deg;
}
.ring i:nth-child(13) {
  --delay: -9s;
  --hue: 1176;
  --rx: 130deg;
  --ry: 204deg;
  --rz: 220deg;
}
.ring i:nth-child(14) {
  --delay: -9.75s;
  --hue: 1274;
  --rx: 39deg;
  --ry: 10deg;
  --rz: 24deg;
}
.ring i:nth-child(15) {
  --delay: -10.5s;
  --hue: 1372;
  --rx: 60deg;
  --ry: 295deg;
  --rz: 347deg;
}
.ring i:nth-child(16) {
  --delay: -11.25s;
  --hue: 1470;
  --rx: 87deg;
  --ry: 234deg;
  --rz: 210deg;
}
.ring i:nth-child(17) {
  --delay: -12s;
  --hue: 1568;
  --rx: 269deg;
  --ry: 271deg;
  --rz: 88deg;
}
.ring i:nth-child(18) {
  --delay: -12.75s;
  --hue: 1666;
  --rx: 70deg;
  --ry: 56deg;
  --rz: 300deg;
}
.ring i:nth-child(19) {
  --delay: -13.5s;
  --hue: 1764;
  --rx: 356deg;
  --ry: 132deg;
  --rz: 22deg;
}
.ring i:nth-child(20) {
  --delay: -14.25s;
  --hue: 1862;
  --rx: 217deg;
  --ry: 353deg;
  --rz: 35deg;
}
.ring i:nth-child(21) {
  --delay: -15s;
  --hue: 1960;
  --rx: 318deg;
  --ry: 94deg;
  --rz: 249deg;
}
.ring i:nth-child(22) {
  --delay: -15.75s;
  --hue: 2058;
  --rx: 177deg;
  --ry: 295deg;
  --rz: 216deg;
}
.ring i:nth-child(23) {
  --delay: -16.5s;
  --hue: 2156;
  --rx: 321deg;
  --ry: 51deg;
  --rz: 360deg;
}
.ring i:nth-child(24) {
  --delay: -17.25s;
  --hue: 2254;
  --rx: 326deg;
  --ry: 182deg;
  --rz: 271deg;
}
.ring i:nth-child(25) {
  --delay: -18s;
  --hue: 2352;
  --rx: 208deg;
  --ry: 131deg;
  --rz: 226deg;
}
.ring i:nth-child(26) {
  --delay: -18.75s;
  --hue: 2450;
  --rx: 168deg;
  --ry: 335deg;
  --rz: 327deg;
}
.ring i:nth-child(27) {
  --delay: -19.5s;
  --hue: 2548;
  --rx: 285deg;
  --ry: 310deg;
  --rz: 319deg;
}
.ring i:nth-child(28) {
  --delay: -20.25s;
  --hue: 2646;
  --rx: 70deg;
  --ry: 287deg;
  --rz: 187deg;
}
.ring i:nth-child(29) {
  --delay: -21s;
  --hue: 2744;
  --rx: 202deg;
  --ry: 212deg;
  --rz: 329deg;
}
.ring i:nth-child(30) {
  --delay: -21.75s;
  --hue: 2842;
  --rx: 92deg;
  --ry: 116deg;
  --rz: 360deg;
}
.ring i:nth-child(31) {
  --delay: -22.5s;
  --hue: 2940;
  --rx: 205deg;
  --ry: 172deg;
  --rz: 159deg;
}
.ring i:nth-child(32) {
  --delay: -23.25s;
  --hue: 3038;
  --rx: 299deg;
  --ry: 314deg;
  --rz: 258deg;
}

@-webkit-keyframes iMove {
  0% {
    transform: rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(50em);
  }
  100% {
    transform: rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(-50em);
  }
}

@keyframes iMove {
  0% {
    transform: rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(50em);
  }
  100% {
    transform: rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(-50em);
  }
}
@-webkit-keyframes iScale {
  0%, 100% {
    inset: -1em;
    opacity: 0;
  }
  35%, 65% {
    inset: -1em;
    opacity: 1;
  }
  50% {
    inset: -10em;
    opacity: 1;
  }
}
@keyframes iScale {
  0%, 100% {
    inset: -1em;
    opacity: 0;
  }
  35%, 65% {
    inset: -1em;
    opacity: 1;
  }
  50% {
    inset: -10em;
    opacity: 1;
  }
}