/*===================================
    morph Animation keyframes ccs
/*===================================*/
@keyframes morph {

    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
    }

    30% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    60% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }

    80% {
        border-radius: 69% 31% 66% 34% / 21% 30% 70% 79%;
    }
}

/*===================================
    Keyframes Skills left
/*===================================*/
/*==========
    html
/*==========*/
@keyframes html {
    0% {
        width: 0%;
    }

    100% {
        width: 72%;
    }
}

/*==========
    css
/*==========*/
@keyframes css {
    0% {
        width: 0%;
    }

    100% {
        width: 62%;
    }
}

/*==========F
    javascript
/*==========*/
@keyframes javascript {
    0% {
        width: 0%;
    }

    100% {
        width: 52%;
    }
}

/*==========
    react
/*==========*/
@keyframes react {
    0% {
        width: 0%;
    }

    100% {
        width: 42%;
    }
}

/*===================================
    glow Animation keyframes ccs
/*===================================*/
@keyframes glow {
    0% {
        background: var(--bg-color);
        box-shadow: none;
    }

    100% {
        background: var(--hover-color);
        box-shadow: var(--neon-box-shadow);
    }
}

/*===================================
    slide Animation keyframes ccs
/*===================================*/
@keyframes slideAnimation {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*===================================
    underline Animation keyframes ccs
/*===================================*/

@keyframes background-size-300 {
    from {
        background-size: 0%;
    }

    to {
        background-size: 300%;
    }
}