.output {
    text-align:center;
    font-family: 'Source Code Pro', monospace;
    color:white;
    }
    h1 
    {
        font-size: 27px;
    }
    

    /* Cursor Styling */

    .cursor::after 
    {
        content:'';
        display:inline-block;
        margin-left:3px;
        background-color:white;
        animation-name:blink;
        animation-duration:0.5s;
        animation-iteration-count: infinite;
    }
    h1.cursor::after 
    {
        height:24px;
        width:13px;
    }
    p.cursor::after 
    {
        height:13px;
        width:6px;
    }

    @keyframes blink {
    0% {
        opacity:1;
    }
    49% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
    }

    .ml15 
    {
        font-weight: 700;
        font-size: 1.5em;
        text-transform: uppercase;
        letter-spacing: 0.5em;
        color: aqua;
        opacity: 0.4;
    }

    .ml15 .word 
    {
        display: inline-block;
        line-height: 1em;
    }

    .cnt{
        display: block;
         margin-left: auto;
        margin-right: auto;
        width: 50%;
        -webkit-filter: drop-shadow(5px 5px 5px #222 );
        filter: drop-shadow(5px 5px 5px #222);   
    }


    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

.title {
  font-weight: bold;
  font-size: 20px;
  color: #db3a34;
}

.bar {
  width: 90%;
  height: 35px;
  background: rgb(209, 245, 227);
  border-radius: 5px;
  position: relative;
  transition: all 2s linear;
}

.bar-1,
.my-skills {
  width: 80%;
  margin: 10px auto 25px;
}

.bar-inner {
  width: 0;
  height: 35px;
  line-height: 35px;
  background: #db3a34;
  border-radius: 5px 0 0 5px;
}

.bar-percent {
  font-size: 18px;
  text-align: center;
  left: 30px;
  top: 5px;
  position: absolute;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(233, 235, 224);
}