#hoverme {
    background: #70c48f;
    color: white;
    padding: 5px;
    text-decoration: none;
}

.visible-Notification {
    animation: movein 1.5s ease forwards, moveout 1s 60s ease forwards;
}

#notif {
    width: max-content;
    max-width: 85%;
    height: max-content;
    background: linear-gradient(90deg, rgba(64,190,246,1) 0%, rgba(51,164,214,1) 60%, rgba(121,214,255,1) 100%);
    padding: 8px 15px;
    color: white;
    border-radius: 3px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 100px;
    right: -200px;
    bottom: 20px;
    top: auto;
    z-index: 9999999999999;
}

#notif {
    right: -200px;
    opacity: 0;
}

.error{
    background: rgba(246,97,64,0.9136029411764706) !important;
    border: 2px solid #87ad19 !important;
    color: white !important;
}

@keyframes movein {
    0% {
        right: -200px;
        opacity: 0;
    }
    40% {
        right: 15px;
        opacity: .3;
    } 
    50% {
        opacity: .7;
    } 
    100% {
        right: 30px;
        opacity: 1;
    }
}

@keyframes moveout {
    0% {
        right: 30px;
        opacity: 1;
    }
    40% {
        right: 15px;
        opacity: .7;
    } 
    50% {
        opacity: .3;
    } 
    100% {
        right: -200px;
        opacity: 0;
    }
}