#toast-message {
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    transform: translateY(10px);
}

#toast-message:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.hidden {
    display: none;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {

}

</style>
<style>
#toast-message {
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    transform: translateY(10px);
}

#toast-message:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.hidden {
    display: none;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {

}