#intro1a{
    animation:
        typing1 1.5s steps(20, end),
        blink-caret .4s step-end 2 both;
}

@keyframes typing1 {
  from { width: 0 }
  25% { width: 50% }
  55% { width: 50% }
  70% { width: 100% }
  to { width: 100% }
}

#intro1b{
    animation:
        typing2 1s steps(20, end) 2s both,
        blink-caret .4s step-end 1s 3 both;
}

@keyframes typing2 {
  from { width: 0 }
  65% { width: 100% }
  to { width: 100% }
}

#intro2a{
    animation:
        typing2 .2s steps(20, end) 0s both,
        blink-caret .4s step-end 0s 3 both;
}

@keyframes typing2 {
  from { width: 0 }
  65% { width: 100% }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.wave {
    animation: wave-animation 1s 1 1.5s;
    transform-origin: 70% 70%;
    display: inline-block;
}

#hand:hover {
  animation: wave-animation2 2s 1;
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}
@keyframes wave-animation2 {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

#header-div1 {
    animation-delay: 3s;
}

#content-div {
    animation-delay: 3s;
}

.skip-animation {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  animation-fill-mode: forwards !important;
}

.shake {
    animation: shake-keys .5s;
}

@keyframes shake-keys{
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}