@keyframes alertAnimation {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rightToggle {
    0%, 30%, 60%, 100% {
        transform: translateX(0px);
    }

    20%, 40% {
        transform: translateX(2px);
    }
}

@keyframes aicolorshift {
    0%, 50%, 100% {
        color: #871874;
    }

    12% {
        color: #6d3da6;
    }

    25% {
        color: #475ed1;
    }

    37% {
        color: #6857c6;
    }

    62% {
        color: #a13558;
    }

    75% {
        color: #8a4cc9;
    }

    87% {
        color: #5e79d9;
    }
}

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

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

@keyframes obsoleteAnimation {
    0% {
        color: transparent;
    }

    50% {
        color: red;
    }

    100% {
        color: transparent;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes rotate {
    0% {
        --a: 0deg;
    }

    10% {
        --a: 45deg;
    }

    50% {
        --a: 135deg;
    }

    90% {
        --a: 315deg;
    }

    100% {
        --a: 360deg;
    }
}

@keyframes slidin {
    0%, 20%, 40%, 100% {
        transform: translateX(0);
    }

    10%, 30% {
        transform: translateY(2%) scale(0.99);
    }
}

@keyframes colorShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}