@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root{
    --head_color: white;
    --msg_color: white;
    
    --font: 'Quicksand', sans-serif;
}


.toast{
    width: auto;
    max-width: 320px;
    transition: transform, opacity, .5s ease .5s;
    padding: 10px;
    position: fixed;
    opacity: 0;
    z-index: 999;
    margin: 20px;
}

.round{
    border-radius: 20px;
}


.toast_header, .toast_msg{
    margin: 0;
    padding: 0;
    font-family: var(--font);
}

.toast_header{
    color: var(--head_color);
    font-weight: bold;
}

.toast_msg{
    color: var(--msg_color);
}

.toast_left{
    transform: translateX(-100%);
}

.toast_center_top{
    margin: 0 auto;
    left: 0;
    right: 0;
    top:0;
    transform: translateY(-100%);
}

.toast_center_bottom{
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
}


.toast_right{
    right: .3em;
    transform: translateX(100%);
}

.toast_bottom{
    bottom: 1.2%;
}

.toast_enter_left{
    transform: translateX(0%);
    opacity: 1;
}

.toast_enter_right{
    transform: translateX(-5%);
    opacity: 1;
}

.toast_enter_center_top{
    transform: translateY(20%);
    opacity: 1;
}

.toast_enter_center_bottom{
    transform: translateY(-20%);
    opacity: 1;
}

@media screen and (max-width: 350px) {
    body{margin: 0;}
    .toast{
        min-width: 100%;
        margin: 0;
        box-sizing: border-box;
        margin: 0px;
    }

    .toast_bottom{
        bottom: 0%;
    }

    .toast_right{
        right: 0em;
    }

    .toast_enter_right{
        transform: translateX(0%);
    }
    
    .toast_enter_center_bottom{
        transform: translateY(0%);
    }

    .toast_enter_center_top{
        transform: translateY(0%);
    }

}