body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

.reloj {
    animation: rotar 10s linear infinite;
}

.arena1 {
    fill: green;
    animation: vaciar 10s ease-in-out infinite;
    transform-origin: center;
    clip-path: ellipse(50% 50% at 50% 50%);
}

.arena2 {
    fill: green;
    animation: llenar 10s ease-in-out infinite;
    transform-origin: center;
    clip-path: ellipse(50% 50% at 50% 50%);
}

@keyframes vaciar {
    0%, 50% {
        transform: scale(1);
    }
    50%, 100% {
        transform: scale(0);
    }
}

@keyframes llenar {
    50%, 0% {
        transform: scale(0);
    }
    100%, 50% {
        transform: scale(1);
    }
}

@keyframes rotar {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}