html {
  width: 100vw;
  height: 100vh;
  background: #43464d;
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}

.app {
  color: whitesmoke;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.header {
  width: 100vw;
  height: auto;
  text-align: center;
  padding-top: 10px;
}

#name {
  font-family: 'Dot Matrix', sans-serif;
  font-size: 8vh;
  user-select: none;
  color: black;
}

#name span{
  animation-name: turnOn, glow;
  animation-duration: 1s, 1s; /* Adjust based on how quickly you want the turn-on effect */
  animation-fill-mode: forwards; /* Keeps the final state after animation */
  animation-timing-function: ease-in-out;
  display: inline-block; /* Allows individual animation */
  animation-iteration-count: 1; /* Makes the animation only play once */
}
#name span:nth-child(1) { animation-delay: 0s, 1s; }
#name span:nth-child(2) { animation-delay: 0.2s, 1.2s; }
#name span:nth-child(3) { animation-delay: 0.4s, 1.4s; }
#name span:nth-child(4) { animation-delay: 0.6s, 1.6s; }
#name span:nth-child(5) { animation-delay: 0.8s, 1.8s; }
#name span:nth-child(6) { animation-delay: 1s, 2s; }
#name span:nth-child(7) { animation-delay: 1.2s, 2.2s; }
#name span:nth-child(8) { animation-delay: 1.4s, 2.4s; }
#name span:nth-child(9) { animation-delay: 1.6s, 2.6s; }
#name span:nth-child(10) { animation-delay: 1.8s, 2.8s; }
#name span:nth-child(11) { animation-delay: 2s, 3s; }
#name span:nth-child(12) { animation-delay: 2.2s, 3.2s; }
#name span:nth-child(13) { animation-delay: 2.4s, 3.4s; }
#name span:nth-child(14) { animation-delay: 2.6s, 3.6s; }
#name span:nth-child(15) { animation-delay: 2.8s, 3.8s; }
#name span:nth-child(16) { animation-delay: 3s, 4s; }
#name span:nth-child(17) { animation-delay:3.2s, 4.2s; }

#welcome {
  font-family: 'Dot Matrix', sans-serif;
  font-size: 2.5vh;
}

.content {
  font-family: 'MODERN TYPEWRITER', sans-serif;
  height: header;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.content-list {
  list-style: none;
}
.content-list {
  list-style-type: none;
}
.content-key {
  display: inline-block;
  width: 160px;
}

.top-margin {
  margin-top: 20px;
}

#work-list {
  list-style: lower-latin;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

#support {
  font-family: 'MODERN TYPEWRITER', sans-serif;
  color: lightgray;
  font-size: 12px;
}

#br {
  font-family: 'Dot Matrix', sans-serif;
  font-size: 2.5vh;
}

#footer-symbol {
  margin: 10px;
}

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
 }

 @keyframes turnOn {
  from { color: black; }
  to { color: white; }
}

@keyframes glow {
  from { text-shadow: none; }
  to { text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
}