/* keyframe animation */

/* about section animation */

@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% / 31% 30% 70% 79%;
    }
}

/* skills section animation */

@keyframes HTML {
    0% {
        width: 0%;
    }

    100% {
        width: 90%;
    }
}

@keyframes CSS {
    0% {
        width: 0%;
    }

    100% {
        width: 85%;
    }
}

@keyframes JavaScript {
    0% {
        width: 0%;
    }

    100% {
        width: 70%;
    }
}

@keyframes Nodejs {
    0% {
        width: 0%;
    }

    100% {
        width: 60%;
    }
}

@keyframes glow {
    0% {
        background-color: var(--bg-color);
        box-shadow: none;
    }

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

/* scroll animation  */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* header animation  */

@keyframes slideAnimation {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

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