.skills-container{
     display: flex;
     flex-direction: column;
     color: rgb(185, 185, 185);
     max-width: 1000px;
     margin: 5rem auto;
     gap: 6rem;
     font-weight: 300;
}

.skills-container>div{
     display: flex;
     justify-content: center;
     gap: 5rem;
}

.skills-subcontainer{
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 2rem;
}

.skills-subcontainer div h2{
     
     font-weight: 300;
     color: #f0f0f0;   
}

.expert-container{
     display: flex;
     flex-direction: column;
     gap: 5px;
}

.expert-label{
     display: flex;
     justify-content: space-between;
}

.bar-border{
     border-radius: 12px;
     background-color: rgb(185, 185, 185);
}

.bar{
     height: 5px;
     background-color: #EDB846;
     border-top-left-radius: 12px;
     border-bottom-left-radius: 12px;
}

#skills{
     position: relative;
}

@media(max-width: 1024px){
     .skills-container{
          gap: 3rem;
     }

     .skills-container>div{
          flex-direction: column;
          gap: 3rem;
          margin: 0 3rem;
     }

     .skills-subcontainer{
          margin-bottom: 2rem;
     }

     .skills-subcontainer:last-child{
          margin-bottom: 0rem!important;
     }

     .skills-subcontainer div h2{
          font-size: 16px;
     }

     .expert-label{
          font-size: 14px;
     }
}

.bar-react{
     width: 79%;
}

.bar-css{
     width: 83%;
}

.bar-js{
     width: 75%;
}

.bar-html{
     width: 86%;
}

.bar-bs{
     width: 81%;
}

.bar-node{
     width: 81%;
}

.bar-x{
     width: 82%;
}

.bar-jsb{
     width: 52%;
}

.bar-mongo{
     width: 78%;
}

.bar-php{
     width: 52%;
}

.bar-laravel{
     width: 57%;
}

.bar-mysql{
     width: 55%;
}

.bar-dynamo{
     width: 41%;
}

.bar-ec2{
     width: 65%;
}

.bar-s3{
     width: 73%;
}

.bar-lambda{
     width: 47%;
}

.bar-g8{
     width: 44%;
}

.bar-sns{
     width: 53%;
}

.bar-python{
     width: 57%;
}

.skills-icon{
     height: 25px;
}

.skills-flex{
     display: flex;
     align-items: center;
     gap: 8px;
     align-self: center;
}