* {
    list-style: none;
}

.bar {
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.bar span {
    float: left;
    background: linear-gradient(135deg, rgba(236, 0, 140, 1)0%, rgba(252, 103, 103, 1)100%);
}

/* Frontend */

.javascript {
    width: 85%;
    animation: javascript 3s;
}

.reactjs {
    width: 80%;
    animation: reactjs 3s;
}

.tailwind {
    width: 99%;
    animation: tailwind 3s;
}

.bootstrap {
    width: 95%;
    animation: bootstrap 3s;
}

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

    100% {
        width: 85%;
    }
}

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

    100% {
        width: 80%;
    }
}

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

    100% {
        width: 99%;
    }
}

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

    100% {
        width: 95%;
    }
}

/* Backend */
.expressjs {
    width: 85%;
    animation: expressjs 3s;
}

.nodejs {
    width: 90%;
    animation: nodejs 3s;
}

.java-backend {
    width: 50%;
    animation: java-backend 3s;
}

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

    100% {
        width: 85%;
    }
}

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

    100% {
        width: 90%;
    }
}

@keyframes java-backend {
    0% {
        width: 0;
    }

    100% {
        width: 50%;
    }
}

/* Database */
.mysql {
    width: 80%;
    animation: mysql 3s;
}

.mongodb {
    width: 90%;
    animation: mongodb 3s;
}

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

    100% {
        width: 80%;
    }
}

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

    100% {
        width: 90%;
    }
}

/* Languages */
.java {
    width: 85%;
    animation: java 3s;
}

.cpp {
    width: 80%;
    animation: cpp 3s;
}

.python {
    width: 60%;
    animation: python 3s;
}

.typescript {
    width: 80%;
    animation: typescript 3s;
}

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

    100% {
        width: 85%;
    }
}

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

    100% {
        width: 80%;
    }
}

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

    100% {
        width: 60%;
    }
}

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

    100% {
        width: 80%;
    }
}