@keyframes bounceInFromTop {
    0% {
        transform: translate(-50%, -200px);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, 10px);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -5px);
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }

}

@keyframes fadeOut {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -20px);
        opacity: 0;
    }
}

html {
    background-color: var(--color-gray-950);
}

.alert-bounce-in {
    animation: bounceInFromTop 0.6s ease-out forwards;
}

.alert-fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

.modal-slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

.modal-slide-out {
    animation: slideOut 0.3s ease-in forwards;
}