.alert {
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: 0.5s ease-in-out;
    position: fixed;
    top: 0;
    right: -10000px;
    margin: 20px;
    border-radius: 10px;
    padding: 10px;
    will-change: transform;
}

.alert.success {
    background: var(--green);
    color: var(--white);
}

.alert.danger {
    background: var(--red);
    color: var(--white);
}

.alert.warning {
    background: var(--yellow);
    color: var(--white);
}

.alert.info {
    background: var(--blue);
    color: var(--white);
}

@keyframes fall-down {
    0% {
        right: -500px;
    }
    75% {
        right: 20px;
    }
    100% {
        right: 0px;
    }
}

@keyframes slide-up {
    0% {
        top: 0px;
    }
    50% {
        opacity: 0.3;
    }
    75% {
        opacity: 0.2;
    }
    100% {
        top: -500px;
    }
}

.alert-show {
    animation: fall-down 1s ease-in-out;
    right:0;
}

.alert-hide {
    animation: slide-up 2s ease-in-out;
    top:-10000px;
}