
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Rancho&family=Water+Brush&display=swap');

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: poppins;

}

.skills_section{

    width: 100%;

    height: 100vh;

    padding: 0px 13%;

    background-color: rgba(0, 0, 0, 0.082);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.skills_head{

    width: 100%;

    margin-bottom: 100px;

    display: grid;

    place-items: center;

    text-align: center;

}

.skills_head h2{

    font-size: 30px;

    margin-bottom: -5px;

}

.skills_head h2 span{

    color: #dfdc3f;

}

.skills_main{

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-row-gap: 30px;

    grid-column-gap: 50px;

}

.skills_main .skill_bar .info{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:  0 10px;

}

.skill_bar .info p:nth-child(2){

    font-weight: 500;

}

.skill_bar .bar{

    width: 100%;

    height: 10px;

    background-color: rgba(0, 0, 0, 0.144);

    border-radius: 25px;

    margin-top: 5px;

    position: relative;

}

.skill_bar .bar span{

    width: 50%;

    height: 100%;

    position: absolute;

    background-color: #e0dd04;

    border-radius: 25px;

}

.skill_bar .bar .html{

    width: 90%;

    animation: html 2s;

}

@keyframes html {

    0%{

        width: 0%;

    }100%{

        width: 90%;

    }

}

.skill_bar .bar .css{

    width: 80%;

    animation: css 2s;

}

@keyframes css {

    0%{

        width: 0%;

    }100%{

        width: 80%;

    }

}

.skill_bar .bar .bootsrap{

    width: 80%;

    animation: bootsrap 2s;

}

@keyframes bootsrap {

    0%{

        width: 0%;

    }100%{

        width: 80%;

    }

}


.skill_bar .bar .js{

    width: 85%;

    animation: css 2s;

}

@keyframes js {

    0%{

        width: 0%;

    }100%{

        width: 85%;

    }

}

.skill_bar .bar .react{

    width: 75%;

    animation: react 2s;

}

@keyframes react {

    0%{

        width: 0%;

    }100%{

        width: 75%;

    }

}

.skill_bar .bar .Cpp{

    width: 70%;

    animation: Cpp 2s;

}

@keyframes Cpp {

    0%{

        width: 0%;

    }100%{

        width: 70%;

    }

}

.skill_bar .bar .java{

    width: 80%;

    animation: java 2s;

}

@keyframes java {

    0%{

        width: 0%;

    }100%{

        width: 80%;

    }

}

.skill_bar .bar .python{

    width: 60%;

    animation: python 2s;

}

@keyframes python {

    0%{

        width: 0%;

    }100%{

        width: 60%;

    }

}