.line__1,
  .line__2, .line__3{
    overflow: hidden; /* hide text behind the cursor */
    border-right: 3px solid rgba(255, 255, 255, 0.0);
    white-space: nowrap; /* keep text in one line */
  }
  
  .line__1 {
    /* define animation types for text + cursor */
    animation: animated-text__1 .2s steps(11, end) .2s 1 normal both,
      animated-cursor__1 900ms steps(11, end) 2;
  }
  
  .line__2 {
    line-height: 50px;
    /* define animation types for text + cursor */
    animation: animated-text__2 .8s  steps(18, end) 1s 1 normal both,
      animated-cursor__2 900ms steps(18, end) 2;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  .line__3 {
    /* define animation types for text + cursor */
    animation: animated-text__3 .8s steps(60, end) 1s 1 normal both,
      animated-cursor__3 1s steps(60, end) 2; 
      /* infinite */
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }


  @keyframes animated-cursor__1 {
    from {
      border-right-color: rgba(17, 17, 17, 0.9);
    }
    to {
      border-right-color: rgba(255, 255, 255, 0.8);
    }
  }
  
  @keyframes animated-cursor__2 {
    from {
      border-right-color: rgba(17, 17, 17, 0.9);
    }
    to {
      border-right-color: rgba(255, 255, 255, 0.8);
    }
  }
  
  @keyframes animated-cursor__3 {
    from {
      border-right-color: rgba(17, 17, 17, 0.9);
    }
    to {
      border-right-color: rgba(255, 255, 255, 0.8);
    }
  }

  @keyframes animated-cursor__4 {
    from {
      border-right-color: rgba(17, 17, 17, 0.9);
    }
    to {
      border-right-color: rgba(255, 255, 255, 0.8);
    }
  }
  
  @keyframes animated-text__1 {
    from {
      width: 0;
    }
    to {
      width: 6rem;
    }
  }
  
  @keyframes animated-text__2 {
    from {
      width: 0;
    }
    to {
      width: 40%;
    }
  }
  
  @keyframes animated-text__3 {
    from {
      width: 0;
    }
    to {
      width: 35%;
    }

    
  }