.nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: 100;
    background-color: black;
}
.nav-bar .in-row{
    display: flex;
    float: right;
}
.nav-content {  
    position: relative;        
    width: 7vw;
    height: 10vh;
}

.nav-content a{
    position: absolute; 
    display: block;
    color: white; 
    left: 50%;
    top: 50%;   
    transform: translate(-50%,-50%);          
    padding: 22px 26px;
    text-decoration: none; 
    letter-spacing: 1px;       
}

.nav-content .nav-curve-animate
{    
    z-index: -1;             
}

.nav-curve-animate{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    background: black;    
}

.nav-content a:hover + .nav-curve-animate{         
    animation: change-color .15s ease-in forwards, ready-to-animate 1.15s .15s ease-in-out forwards, blob-animate 4.15s 1.15s ease-in-out infinite;    
}


@keyframes change-color{
    0%{
        background: black;        
    }
    100%{
        background: linear-gradient(180deg, #410445, #A5158C);
    }
}
@keyframes ready-to-animate{
    0%{
        border-radius: 0%;
    }
    50%{
        border-radius: 30% 30% 30% 30%;
    }
    100%{
        border-radius: 30% 90% 60% 70%;
    }
}
@keyframes blob-animate{
    0%{
        border-radius: 30% 90% 60% 70%;
    }
    25%{
        border-radius: 70% 30% 30% 40%;
    }
    50%{
        border-radius: 30% 60% 50% 90%;
    }
    75%{
        border-radius: 70% 30% 30% 40%;
    }
    100%{
        border-radius: 30% 90% 60% 70%;
    }
}

.nav-content a:not(hover) ~ .nav-curve-animate{
    animation: back-to-normal 1s ease-out forwards, normal-color .5 1s ease-in-out;
}
@keyframes normal-color{
    0%{
        background: linear-gradient(180deg, #410445, #A5158C);
    }
    100%{
        background: black; 
    }
}
@keyframes back-to-normal{
    0%{
        border-radius: 30% 30% 30% 30%;
    }    
    100%{
        border-radius: 0%;
    }
}