@keyframes slide-right {
    from{
        opacity: 0;
        transform: translateX(-1rem);
    } to{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-left {
    from{
        opacity: 0;
        transform: translateX(1rem);
    } to{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-up {
    from{
        opacity: 0;
        transform: translateY(1rem);
    } to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from{
        opacity: 0;
        transform: translateY(-1rem);
    } to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes add-info {
    0%{
        display: none;
        opacity: 0;
        transform: translateX(-1rem);
    } 1% {
        display: block;
        opacity: 0;
        transform: translateX(-1rem);
    } 100% {
        opacity: 1;
        transform: translateX(0);
    }
}