@charset "utf-8";
/* CSS Document */

.habilidades li {
    position: relative;
    list-style: none;
    margin: 50px 0;
    font-weight: 500;
    text-transform: uppercase;
}

.habilidades li:before {
    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    height: 15px;
    background-color: rgba(54, 126, 223, .5);
    border-radius: 1000px;
}

.habilidades li:after {
    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 0;
    height: 15px;
    background-color: rgba(54, 126, 223, 1);
    border-radius: 1000px;
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.habilidades li.html:after {
    animation-name: html;
}

@keyframes html {
    to {
        width: 90%;
    }
}

.habilidades li.css:after {
    animation-name: css;
}

@keyframes css {
    to {
        width: 80%;
    }
}

.habilidades li.js:after {
    animation-name: js;
}

@keyframes js {
    to {
        width: 75%;
    }
}

.habilidades li.ng:after {
    animation-name: ng;
}

@keyframes ng {
    to {
        width: 60%;
    }
}