body {
    display: flex;
    width: 100vh;
    height: auto;
    align-items: center;
    justify-content: center;
}


#arena {
    transform-origin: center;
    animation: caer 5s ease-in infinite;
}

@keyframes caer {
    from {
        scale: 1;
    }
    90%{
        scale: 0;
    }
    to {
        scale: 0;
    }
}

#arena2 {
    transform-origin: bottom;
    animation: llenar 5s ease-in infinite;
}

@keyframes llenar {
    from {
        scale: 0;
    }
    90%{
        scale: 1;
    }
    to {
        scale: 1;
    }
}

#grano_arena {
    animation: grano 0.5s ease-in infinite;

}

@keyframes grano {
    from {
        transform: translateY(8px);
    }
    to {
        transform: translateY(80px);
    }
}

#midiv {
    transform-origin: center;
    animation-name: rotar;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes rotar {
    from {
        rotate: 0deg;
    }
    90% {
        rotate: 0deg;
    }
    to {
        rotate: 180deg;
    }
}