.ml11 {
    font-weight: 700;
    font-size: 3.5em;
  }
  
  .ml11 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
  }
  
  .ml11 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: #fff;
    transform-origin: 0 50%;
  }
  
  .ml11 .line1 { 
    top: 0; 
    left: 0;
  }
  
  .ml11 .letter {
    display: inline-block;
    line-height: 1em;
  }

  /* animat fon fill my name */
  .ml5 {
    position: relative;
    font-weight: 300;
    font-size: 4.5em;
    color: #c7c0c0;
  }
  
  .ml5 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
    line-height: 1em;
  }
  
  .ml5 .line {
    position: absolute;
    left: 0;
    top: 10rem;
    bottom: 0;
    
    margin: 1rem auto;
    height: 3px;
    width: 100%;
    background-color: #d4c7c7;
    transform-origin: 0.3 0;
  }
  
  .ml5 .ampersand {
    font-family: Baskerville, serif;
    font-style: italic;
    font-weight: 400;
    width: 1em;
    margin-right: -0.1em;
    margin-left: -0.1em;
  }
  
  .ml5 .letters {
    display: inline-block;
    opacity: 0;
  }