.underline {
  text-decoration-line: underline;
  text-decoration-color: white;
}

::selection{

color: #fff;

background: #6665ee;

}

.skill-bars{
margin: auto;

padding: 25px 30px;

width: 85%;

background: #fff;

box-shadow: 5px 5px 20px rgba(0,0,0,0.2);

border-radius: 10px;

}

.skill-bars .bar{

margin: 20px 0;

}

.skill-bars .bar:first-child{

margin-top: 0px;

}

.skill-bars .bar .info{

margin-bottom: 5px;

}

.skill-bars .bar .info span{

font-weight: 500;

font-size: 17px;

opacity: 0;

animation: showText 0.5s 1s linear forwards;

}

@keyframes showText {

100%{

opacity: 1;

}

}

.skill-bars .bar .progress-line{

height: 10px;

width: 100%;

background: #f0f0f0;

position: relative;

transform: scaleX(0);

transform-origin: left;

border-radius: 10px;

box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),

0 1px rgba(255,255,255,0.8);

animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;

}

@keyframes animate {

100%{

transform: scaleX(1);

}

}

.bar .progress-line span{

height: 100%;

position: absolute;

border-radius: 10px;

transform: scaleX(0);

transform-origin: left;

background: #6665ee;

animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;

}

.bar .progress-line.html span{

width: 90%;

}

.bar .progress-line.css span{

width: 60%;

}

.bar .progress-line.bootstrap span{

  width: 90%;
  
  }
 
.bar .progress-line.js span{

width: 40%;

}

.bar .progress-line.java span{

width: 30%;

}

.bar .progress-line.python span{

width: 50%;

}

.bar .progress-line.php span{

width: 75%;

}

.bar .progress-line.sql span{

width: 60%;

}


.bar .progress-line.git span{

width: 90%;

}

.bar .progress-line.microsoft span{

width: 95%;

}

.bar .progress-line.photoshop span{

width: 80%;

}



.progress-line span::before{

position: absolute;

content: "";

top: -10px;

right: 0;

height: 0;

width: 0;

border: 7px solid transparent;

border-bottom-width: 0px;

border-right-width: 0px;

border-top-color: #000;

opacity: 0;

animation: showText2 0.5s 1.5s linear forwards;

}

.progress-line span::after{

position: absolute;

top: -28px;

right: 0;

font-weight: 500;

background: #000;

color: #fff;

padding: 1px 8px;

font-size: 12px;

border-radius: 3px;

opacity: 0;

animation: showText2 0.5s 1.5s linear forwards;

}

@keyframes showText2 {

100%{

opacity: 1;

}

}

.progress-line.html span::after{

content: "90%";

}

.progress-line.css span::after{

content: "60%";

}

.progress-line.bootstrap span::after{

  content: "90%";
  
  }

.progress-line.js span::after{

content: "40%";

}

.progress-line.java span::after{

content: "30%";

}

.progress-line.python span::after{

content: "50%";

}

.progress-line.php span::after{

content: "75%";

}

.progress-line.sql span::after{

content: "60%";

}

.progress-line.git span::after{

content: "90%";

}

.progress-line.microsoft span::after{

content: "95%";

}

.progress-line.photoshop span::after{

content: "80%";

}