/* Animation Keyframes and Classes */
/* Bouncing*/
@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Sliding */
@keyframes slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Shaking */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Spinning*/
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Rotating */
@keyframes rotate {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-20px);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: translateY(-20px);
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Styles for the Animated Cat Element */
.animated-cat {
    margin-bottom: 40px;
    width: 200px;
    height: 200px;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* Keep the final state of the animation */
    animation-fill-mode: forwards;
}

/* Animation Class for Bouncing Effect */
.bounce {
    animation-name: bounce;
}

/* Animation Class for Slide Effect */
.slide {
    animation-name: slide;
}

/* Animation Class for Shake Effect */
.shake {
    animation-name: shake;
}

/* Animation Class for Spin Effect */
.spin {
    animation-name: spin;
}

/* Animation Class for Rotating Effect */
.rotate {
    animation-name: rotate;
}