@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);
 /* background-color: #1E293B; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 2vh;

}
.skills_head {
  width: 100%;
  margin-bottom: 60px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 16px;
}
.skills_head h2 {
  font-size: 40px;
  margin-bottom: -5px;
}
.skills_head h2 span {
  color: #fdba74;
  

}
.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; */
  font-size: 20px;
}
.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: #fdba74;
  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: 85%;
  animation: css 2s;
}
@keyframes css {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}
.skill_bar .bar .sass {
  width: 70%;
  animation: sass 2s;
}
@keyframes sass {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
.skill_bar .bar .js {
  width: 90%;
  animation: css 2s;
}
@keyframes js {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
.skill_bar .bar .react {
  width: 80%;
  animation: react 2s;
}
@keyframes react {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}
.skill_bar .bar .node {
  width: 85%;
  animation: node 2s;
}
@keyframes node {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}
.skill_bar .bar .express {
  width: 85%;
  animation: express 2s;
}
@keyframes express {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}
.skill_bar .bar .mongo {
  width: 80%;
  animation: mongo 2s;
}
@keyframes mongo {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}

.skill_bar .bar .bootstrap {
  width: 75%;
  animation: bootstrap 2s;
}
@keyframes bootstrap {
  0% {
    width: 0%;
  }
  100% {
    width: 75%;
  }
}

.skill_bar .bar .sql {
  width: 70%;
  animation: sql 2s;
}
@keyframes sql {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}

.skill_bar .bar .tail {
  width: 80%;
  animation: tail 2s;
}
@keyframes tail {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}

.skill_bar .bar .jason {
  width: 80%;
  animation: jason 2s;
}
@keyframes jason {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}

@media only screen and (max-width: 550px) {
  /*.skills_main {
    width: 100%;
   
   }
  .skills_head p {
    padding-top: 1vh;
  }
  .skills_section {
    width: 100%;
    height: 78vh;
    padding: 0px 3%;
    padding-bottom: 0.5vh;
  }
  .skill_bar .bar {   
    height: 8px;
  }*/
  .skills_main .skill_bar .info {   
    font-size: 15px;
  }
}