.title-skills {
    font-size: 2em;
    margin-top: 4em;
    font-family: "Raleway", sans-serif;
    text-transform: uppercase;
    letter-spacing: 10px;
    transition: all 400ms ease-in-out;
    margin: 4rem auto;
    text-align: center;
  }
  
  .bar {
    width: 90%;
    margin: 2em auto;
  }
  
  .skill {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 0.25em;
  }
  
  .speech-bubble {
    font-size: 10px;
    line-height: 2em;
    position: absolute;
    top: -2.7em;
    text-align: center;
    min-width: 3em;
    color:aliceblue;
    display: none;
  }
  
  .html,
  .photo,
  .fluent {
    left: calc(75% - 1.5em);
  }
  
  .jquery {
    left: calc(25% - 1.5em);
  }
  
  .sketch,
  .illustrator {
    left: calc(90% - 1.5em);
  }
  
  .indesign {
    left: calc(85% - 1.5em);
  }
  
  .speech-bubble:after {
    border: 0.5em solid transparent;
    content: "";
    margin-left: -0.5em;
    position: absolute;
    top: 100%;
    left: 50%;
  }
  
  .bar-outer {
    height: 1.25em;
    background: #EEEEEE;
    position: relative;
    border-radius: 0.3em;
  }
  
  .bar-inner {
    width: 0;
    height: 1.25em;
    
  }
  
  .ht, .html {
    background: #ffd600 ;
  }
  
  .html:after {
    border-top-color: #ffd600 ;
  }
  
  .jq, .jquery {
    background: #ffd600 ;
  }
  
  .jquery:after {
    border-top-color: #ffd600 ;
  }
  
  .sk, .sketch {
    background: #ffd600 ;
  }
  
  .sketch:after {
    border-top-color: #ffd600 ;
  }
  
  .ph, .photo {
    background: #ffd600 ;
  }
  
  .photo:after {
    border-top-color: #ffd600 ;
  }
  
  .il, .illustrator {
    background: #ffd600 ;
  }
  
  .illustrator:after {
    border-top-color: #ffd600 ;
  }
  
  .in, .indesign {
    background: #ffd600 ;
  }
  
  .indesign:after {
    border-top-color: #ffd600 ;
  }
  
  .fl, .fluent {
    background: #ffd600 ;
  }
  
  .fluent:after {
    border-top-color: #ffd600 ;
  }