@import "tailwindcss";

@theme inline {
    --animate-first: moveVertical 30s ease infinite;
    --animate-second: moveInCircle 20s reverse infinite;
    --animate-third: moveInCircle 40s linear infinite;
    --animate-fourth: moveHorizontal 40s ease infinite;
    --animate-fifth: moveInCircle 20s ease infinite;

    @keyframes moveHorizontal {
        0% {
            transform: translateX(-50%) translateY(-10%);
        }
        50% {
            transform: translateX(50%) translateY(10%);
        }
        100% {
            transform: translateX(-50%) translateY(-10%);
        }
    }

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

    @keyframes moveVertical {
        0% {
            transform: translateY(-50%);
        }
        50% {
            transform: translateY(50%);
        }
        100% {
            transform: translateY(-50%);
        }
    }
}