.perspective {
    z-index: 0;
    /* the median of some vw and vh value to keep it responsive.*/
    --size: calc((40vh + 20vw )/ 2);
    position: absolute;
    left: 70%;
    perspective: calc(100 * var(--size));
}

#sphere {
    will-change: transform;
    width: var(--size);
    aspect-ratio: 1;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateSphere 10s linear infinite;
}

.circle {
    width: var(--size);
    aspect-ratio: 1;
    position: absolute;
    transform-style: preserve-3d;
    border-radius: 50%;
    border: 2px solid #a472ab;
}


@keyframes rotateSphere {
    from {
        transform: rotateX(0) rotateY(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.rain {
    position: absolute;
    color:#a472ab;
    top: -5rem;
    opacity: 100%;
    animation: fadeOut 1s linear forwards;
    font-weight: 900;
}

@keyframes fadeOut {
    from {
        opacity: 100%;
    } to {
        opacity: 0%;
    }
}

.rain.lightning {
    font-size: var(--cell-font-size); /* Use dynamically calculated font size */
    pointer-events: none;
}