.container-skills{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;
  padding-top: 50px;
}
@keyframes load{
  from {
    width: 0%
  }
}
@-webkit-keyframes load{
  from {
    width: 0%
  }
}
@-moz-keyframes load{
  from {
    width: 0%
  }
}
@-o-keyframes load{
  from {
    width: 0%
  }
}

.bar{
  background-color: #EEE;
  padding: 2px;
  border-radius: 0.5rem;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bar::before{
  content:  attr(data-skill);
  background-color: #f3b0ff;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
}

.bar.front::before{
  background-color: #ffcc33;
}
.bar.back::before{
  background-color: #a6cfe3;
}

.bar.HTML5::before{
  width: calc(100% - 10px);
  background-color: #ffb101;
}
.bar.CSS::before{
  width: calc(98% - 10px);
  background-color: #264de4;
}

.bar.JAVASCRIPT::before{
  width: calc(95% - 10px);
  background-color:#f67317;
}
.bar.LEADERSHIP::before{
  width: calc(98% - 10px);
  background-color:#000000;
}
.bar.JQUERY::before{
  width: calc(95% - 10px);
  background-color: #f67317;
}

.bar.PHP::before{
  width: calc(75% - 10px);
  background-color: #1abc9c;
}
.bar.PYTHON::before{
  width: calc(30% - 10px);
  background-color: #1abc9c;
}
.bar.CSHARP::before{
  width: calc(100% - 10px);
  background-color: #1abc9c;
}
.bar.JAVA::before{
  width: calc(50% - 10px);
  background-color: #1abc9c;
}
.bar.VR::before{
  width: calc(70% - 10px);
  background-color: #961212;
}
.bar.WORDPRESS::before{
  width: calc(80% - 10px);
  background-color: #4494d4;
}
.bar.GPT::before{
  width: calc(90% - 10px);
  background-color: #19c37d;
}





.bold-title{
  font-weight: bold;
}