.notification {
    position: fixed;
    top: 10px;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 200px;

    display: none;

    background-color: rgb(47, 255, 64);
    padding: 10px;
    z-index: 1;
    border-radius: 2rem;
    opacity: 0;
}


.notification.notification-animate {
    display: block;
    animation: appear 2.2s;
}

@keyframes appear {
    0% {
        top: 0px;
        opacity: 0%;
    }

    20% {
        top: 10px;
        opacity: 100%;
    }


    80% {
        top: 10px;
        opacity: 100%;
    }

    100% {
        top: 0px;
        opacity: 0%;
    }
}