/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #212121;
  color: #DD7B2E;
  font-family: 'Courier New', monospace;
}


/*hyperlink*/
a:link {
  color: LightGray;
  background-color:transparent;
  text-decoration: none;
  }
a:visited{
  color: Gray;
  background-color:transparent;
  text-decoration: none;
}
a:hover{
 color: White;
 background-color:transparent;
 text-decoration: none; 
}


/*typewriter effect*/
.typewriter{
 display: flex;
 
}
.typewriter h1{
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  /*margin-inline: auto;*/
  overflow: hidden; /*hide for animation*/
  white-space: nowrap; /*single line*/
  border-right: 1px solid; /*cursor*/
  
  /*steps = number of characters*/
  animation: typing 1.5s steps(18) forwards,
  backspace 1s 2s steps(6) forwards, clear-original 1s 3.1s infinite steps(1);
  }
  
  #title2{
   animation-delay: 4.3s; 
   animation: rewrite 0.4s 3.1s steps(6) forwards,
  blink 1s step-end infinite;
  }
  
  @keyframes typing{
    from{
     width: 0;
     } 
    to{
     width: 100%; 
    }
  
  }
  
  @keyframes backspace{
   from{
     width:100%;
     }
   to{
     width:66%;
     }
  }
  
  @keyframes clear-original{
    0%{
      font-size:0%;
      animation-play-state:paused;
      }
    /*51%{animation-play-state:paused;}*/
  }
  
  @keyframes rewrite{
    from{
      font-size:150%;
     width:66%;
     }
   to{
     width:100%;
     font-size:150%;
     }
    
  }
  
  @keyframes blink{
    50%{
     border-color: transparent;
    }
  }