/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: var(--main-background); /* Black background color */
    color: var(--body-text); /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 10px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    bottom: 60px; /* 30px from the bottom */
}

#snackbar.show {
    visibility: visible; /* Show the snackbar */
    animation: fadeinout 4s ease forwards;
    opacity: 0;
}

@keyframes fadeinout {
    50% {
        opacity: 1;
    }
}