:root{
    --popupTransparency: 0.8;
}

.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -100px);

    max-width: 90%;
    padding: 12px 20px;

    color: white;
    border-radius: 8px;

    font-size: 15px;
    font-weight: 500;
    text-align: center;

    opacity: 0;
    pointer-events: none;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

    z-index: 9999;
}

/* Farben */

.notification.error {
    background: hsla(4, 71%, 50%, var(--popupTransparency));
    border: 1px solid #d93025;
}

.notification.success {
    background: hsla(138, 68%, 30%, var(--popupTransparency));
    border: 1px solid #188038;
}

.notification.warning {
    background: hsla(41, 100%, 49%, var(--popupTransparency));
    border: 1px solid #f9ab00;
    color: #222;
}

.notification.info {
    background: hsla(214, 82%, 51%, var(--popupTransparency));
    border: 1px solid #1a73e8;
}

.notification.show {
    transform: translate(-50%, 0);
    opacity: 1;
}