.container-bubbles {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -999;
}

.bubbles {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.bubbles .bi-controller {
  opacity: 0.5;
    position: relative;
    font-size: 30px; /* Ajusta el tamaño según sea necesario */
    color: #4fc3dc;
    margin: 0 4px;
    text-shadow: 0 0 10px #4fc3dc44, 0 0 20px #4fc3dc, 0 0 30px #4fc3dc;
    animation: animate 15s linear infinite;
    animation-duration: calc(250s / var(--i));
}

@keyframes animate {
    0% {
        filter: hue-rotate(0deg);
        transform: translateY(100vh) scale(0);
    }
    100% {
        filter: hue-rotate(360deg);
        transform: translateY(-10vh) scale(1);
    }
}