*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

.progress-bar div span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #222;
    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;
}

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

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

.react{
    background: #9c27b0;
    animation: react 1s linear forwards;
}

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

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

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

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

.react span {
    border: 1px solid #9c27b0;
}

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

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

@keyframes javascript {
    100%{
        width: 65%;
    }
}

@keyframes python {
    100%{
        width: 54%;
    }
}

@keyframes react {
    100%{
        width: 49%;
    }
}