.toast-fade-in {
    animation: fadeIn 1s ease forwards;
    width: 60%;
}


.toast-fade-out {
    animation: fadeOut 1s ease forwards;
    width: 60%;
}


@media (min-width: 600px) and (max-width: 1199px) {

    .toast-fade-in {
        width: 35%;
    }

    .toast-fade-out {
        width: 35%;
    }  
}

  
@media (min-width: 1200px) {

    .toast-fade-in {
        width: 30%;
    }

    .toast-fade-out {
        width: 30%;
    }
}


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


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