@keyframes bgColorChange {
    0% {
        background-color: rgb(30 64 175 / 0.9); /* bg-blue-800/90 equivalent */
    }

    50% {
        background-color: rgb(30 64 175 / 0.9); /* bg-blue-800/90 equivalent */
    }

    100% {
        background-color: rgb(229 231 235); /* bg-gray-200 equivalent */
    }
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.animate-bg {
    animation: bgColorChange 5s ease-in-out;
    animation-fill-mode: forwards;
}

.animate-hide {
    animation: hideElement 5s ease-in-out;
    animation-fill-mode: forwards;
}

.animate-show {
    animation: hideElement 5s ease-in-out reverse;
    animation-fill-mode: forwards;
}