:root {
    --animation-time: 1000ms;
  }
  
  body {
    perspective: 75rem;
    transform-style: preserve-3d;
  }

  .ball-container {
    margin: 3%;
  }
  
  #balls {
    display: flex;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    perspective: 75rem;
    z-index: 0;
  }
  
  .ball {
    z-index: 0;
    background-color: white;
    border-radius: 50%;
    position: relative;
    width: 65px;
    height: 65px;
  }
  .ball span {
    border-radius: 50%;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  
  .ball::before {
    position: absolute;
    content: "";
  
    top: 60%;
    left: -10%;
    width: 150%;
    height: 4em;
  
    background: radial-gradient(
      rgba(0, 0, 0, 0.3) 5%,
      rgba(0, 0, 0, 0.2) 30%,
      transparent 60%
    );
  }
  
  .ball span::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 10%,
      rgba(0, 18, 255, 0.5) 100%
    );
  }

  .ball-style-2 .ball span::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.25) 10%,
      rgb(2 2 2 / 50%) 100%
    );
  }
  
  .ball-bg-animation {
    -webkit-animation: bg var(--animation-time) linear forwards;
  
    -moz-animation: bg var(--animation-time) linear forwards;
  
    -ms-animation: bg var(--animation-time) linear forwards;
  
    animation: bg var(--animation-time) linear forwards;
  }
  .ball-move-animation {
    -webkit-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    -moz-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    -ms-animation: moveRightToLeft var(--animation-time) linear forwards;
  
    animation: moveRightToLeft var(--animation-time) linear forwards;
  }
  
  .ball-move-animation::before {
    -webkit-animation: shadow var(--animation-time) linear forwards;
  
    -moz-animation: shadow var(--animation-time) linear forwards;
  
    -ms-animation: shadow var(--animation-time) linear forwards;
  
    animation: shadow var(--animation-time) linear forwards;
  }
  
  @keyframes bg {
    0% {
      background-position: 50px 0px;
    }
    10% {
      background-position: 80px -50px;
    }
    20% {
      background-position: 130px -100px;
    }
    30% {
      transform: rotate(0deg);
    }
    100% {
      background-position: 246px -238px;
      transform: rotate(-360deg);
    }
  }
  
  @keyframes shadow {
    0% {
      width: 90%;
    }
  
    100% {
      width: 150%;
    }
  }
  
  @keyframes moveRightToLeft {
    0% {
      top: -50px;
      left: 200px;
    }
    10% {
      top: -40px;
      left: 180px;
    }
    20% {
      top: -25px;
      left: 150px;
    }
    30% {
      top: 0px;
      left: 100px;
    }
    100% {
      left: 0%;
    }
  }