body,
html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

#toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Add shadow */
    font-size: 14px; /* Increase font size */
    font-weight: bold; /* Make text bold */
    max-width: 350px; /* Add max-width */
    word-wrap: break-word; /* Break words to the next line if necessary */
}

#alertText {
    color: yellow; /* Make the "Alert" text yellow or any color that stands out */
    margin-right: 10px; /* Add some spacing between "Alert" and the message */
    font-size: 18px;
}

#toast.show {
    opacity: 1;
}

/* You can customize the animations and colors based on the type of notification */
#toast.success {
    background-color: green;
}

#toast.error {
    background-color: red;
}

#toast.warning {
    background-color: orange;
}