body{
    overflow: hidden;
}

#ruotabox{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--bgColor);
}

.ruota{
    position: relative;
    width: 200px;
    height: 200px;
    animation: rotazione 9s linear infinite;
}

.ruota::before, 
.ruota::after{
    content: '';
    position: absolute;
    inset: 0; /* prende width+height al 100% */
    background: linear-gradient(45deg, #fff, rgba(255, 255, 255, 0.5));
    clip-path: polygon(50% 0%, 60% 20%, 50% 100%, 40% 20%);
}

.ruota::after{
    transform: rotate(180deg);
}

@keyframes rotazione{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}