:root {
    --total-particles: 300; /* Total number of particles */
    --orb-size: 100px; /* Diameter of the orb */
    --particle-size: 2px; /* Size of each particle */
    --animation-time: 14s; /* Total animation duration */
    --base-hue: 180; /* Color base for particles */
  }
  
  .container-particle {
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent scrollbars */
  }
  
  .wrap {
    position: relative;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: rotate var(--animation-time) infinite linear;
  }
  
  @keyframes rotate {
    100% {
      transform: rotateY(360deg) rotateX(360deg);
    }
  }
  
  .c {
    position: absolute;
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;
    opacity: 0;
    background-color: white; 
  }