.typewriter  {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .55em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
   /* Gives that scrolling effect as the typing happens */
  letter-spacing: .00em; /* Adjust as needed */
  width: 61%;
  cursor: default;
  
  
  
  
  
  animation: 
    typing 0.5s steps(1000, end),
    blink-caret .1s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 64% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
.typewriter2 {
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor: default;




/* animation delay should be the same as previous animations typing*/
animation: 
  typing 0.5s steps(1500, end);
animation-delay: 0.5s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter3{
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor: default;


animation: 
  typing 0.5s steps(1500, end);
animation-delay: 0.8s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter4{
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor: default;


animation: 
  typing 0.5s steps(1500, end);
animation-delay: 1.1s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter5{
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor: default;


animation: 
  typing 0.5s steps(1500, end);
animation-delay: 1.4s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter6{
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor:default;


animation: 
  typing 0.5s steps(1500, end);
animation-delay: 1.7s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter7{
overflow:hidden;
border-right: 0em;
white-space: nowrap;
letter-spacing: .00em;
margin-top: 3px;
cursor: default;


animation: 
  typing 0.5s steps(1500, end);
animation-delay: 2s;
animation-fill-mode: both;

@keyframes typing {
  from { width: 0 }
    to { width: 100% }
    }
    /* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }  
}
}
.typewriter8{
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 3px;
  cursor: default;
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 2.3s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.typewriter9 {
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 3px;
  
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 2.6s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.typewriter10 {
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 6px;
  
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 2.9s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.typewriter11 {
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 6px;
  
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 3.2s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.typewriter12 {
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 6px;
  
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 3.5s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.typewriter13 {
  overflow:hidden;
  border-right: 0em;
  white-space: nowrap;
  letter-spacing: .00em;
  margin-top: 6px;
  text-decoration: none;
  cursor: default;

  
  
  

  animation: 
    typing 0.5s steps(1500, end);
  animation-delay: 3.8s;
  animation-fill-mode: both;

  @keyframes typing {
    from { width: 0 }
      to { width: 100% }
      }
      /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }  
  }
}
.ex1 {
  text-decoration: none;
  color: white;
}
.typewriter9:hover {
  background-color: white;
  color:black
}
.typewriter10:hover {
  background-color: white;
  color:black
}
.typewriter11:hover {
  background-color: white;
  color:black
}
.typewriter12:hover {
  background-color: white;
  color:black
}
.typewriter13:hover {
  background-color: white;
  color:black
}