.containerr {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.skills h2 {
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #fff;
    font-size: 16px;
}

.progress-bar {
    background: #c3bfbf;
    width: 400px;
    height: 10px;
    border-radius: 5px;
}

.progress-bar div {
    height: 10px;
    border-radius: 5px;
    width: 0%;
}

.progress-bar div span {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #576f6f;
    float: right;
    margin-top: -15px;
    margin-right: -20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.html {
    background: #e91e63;
    animation: html 1s linear forwards;
}

.css {
    background: #cddc39;
    animation: css 1s linear forwards;
}

.js {
    background: #00bcd4;
    animation: js 1s linear forwards;
}

.php {
    background: #ffeb3b;
    animation: php 1s linear forwards;
}

.csharp {
    background: #f23bff;
    animation: csharp 1s linear forwards;
}

.java {
    background: #4f3bff;
    animation: java 1s linear forwards;
}

.laravel {
    background: #5ca3ff;
    animation: laravel 1s linear forwards;
}

.mongodb {
    background: #ff675c;
    animation: mongodb 1s linear forwards;
}

.access {
    background: #ffce5c;
    animation: access 1s linear forwards;
}

.mysql {
    background: #a8ff5c;
    animation: mysql 1s linear forwards;
}

.soap {
    background: #f96ce6;
    animation: soap 1s linear forwards;
}

.axios {
    background: #77e0f5;
    animation: axios 1s linear forwards;
}

.virtualbox {
    background: #0c89ea;
    animation: virtualbox 1s linear forwards;
}

.html span {
    border: 1px solid #e91e63;
}

.css span {
    border: 1px solid #cddc39;
}

.js span {
    border: 1px solid #00bcd4;
}

.php span {
    border: 1px solid #ffeb3b;
}

.csharp span {
    border: 1px solid #f23bff;
}

.java span {
    border: 1px solid #4f3bff;
}

.laravel span {
    border: 1px solid #5ca3ff;
}

.mongodb span {
    border: 1px solid #ff675c;
}

.access span {
    border: 1px solid #ffce5c;
}

.mysql span {
    border: 1px solid #a8ff5c;
}

.soap span {
    border: 1px solid #f96ce6;
}

.axios span {
    border: 1px solid #77e0f5;
}

.virtualbox span {
    border: 1px solid #0c89ea;
}

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

@keyframes css{
    100%{
        width: 90%;
    }
}

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

@keyframes php{
    100%{
        width: 86%;
    }
}

@keyframes csharp{
    100%{
        width: 85%;
    }
}

@keyframes java{
    100%{
        width: 60%;
    }
}

@keyframes laravel{
    100%{
        width: 70%;
    }
}

@keyframes mongodb{
    100%{
        width: 60%;
    }
}

@keyframes access{
    100%{
        width: 80%;
    }
}

@keyframes mysql{
    100%{
        width: 85%;
    }
}

@keyframes soap{
    100%{
        width: 50%;
    }
}

@keyframes axios{
    100%{
        width: 50%;
    }
}

@keyframes virtualbox{
    100%{
        width: 95%;
    }
}