.notification {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #28a745;
    z-index: 10;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    animation: fade-in 0.3s linear forwards, fade-out 0.5s 2.5s linear forwards;
}

.notification-center {
    left: 50%;
    top: 50%;
}

.notification .card {
    position: relative;
    top: -50%;
    left: -50%;
    background-color: white;
    color: #28a745;
}

.notification .card {
    border-radius: 50px;
    border: 5px solid #28a745;
    min-width: 250px;
}

.outline {
    fill: white;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: dash 1s linear forwards, fill 1s 1s linear forwards;
    stroke: #28a745;
    stroke-width: 5px;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    to {
        fill: #28a745;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}