.notifications {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    /* Stay in place */
    z-index: 10;
    /* Sit on top */
    left: 0px;
    top: 0px;
    overflow-x: hidden;
    /* Disable horizontal scroll */
    color: #FFFFFF;
    pointer-events: none;
}

.notification {
    text-decoration: none;
    color: #ffffff;
    background-size: auto 100%;
    background-color: rgba(0, 0, 0, 0.7);
    margin: 3px 3px 3px 3px;
    display: block;
    box-sizing: border-box;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 350px;
    pointer-events: auto;
    background-color: black;
    animation-name: showNotification;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes showNotification {
    0% {
        visibility: visible;
        background-color: white;
    }
    10% {
        background-color: black;
    }
    90% {
        background-color: black;
    }
    99% {}
    100% {
        background-color: black;
        visibility: hidden;
    }
}

.notificationItem {
    padding: 20px 20px;
}