#title {
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 0 -2.5em;
}

#name {
  color: black;
  text-align: center;
  font-size: clamp(3rem, 6vw, 10rem);
}

.titleLetter {
  display: inline-block;
  font-family: Renogare-Regular;
  transition: transform 1500ms linear, color 0s 50ms linear;
  margin: 0;
}
.titleLetter.invisible {
  transform: translate(0, -100vh);
}
.titleLetter.flash {
  -webkit-text-stroke: black 1px;
  color: white;
}
.titleLetter.i-color:hover {
  color: #2b87ab;
  transition-delay: 0s;
}
.titleLetter.l-color:hover {
  color: #ba652e;
  transition-delay: 0s;
}
.titleLetter.j-color:hover {
  color: #4152a3;
  transition-delay: 0s;
}
.titleLetter.t-color:hover {
  color: #96417c;
  transition-delay: 0s;
}
.titleLetter.s-color:hover {
  color: #5a9641;
  transition-delay: 0s;
}
.titleLetter.z-color:hover {
  color: #b1324b;
  transition-delay: 0s;
}
.titleLetter.o-color:hover {
  color: #bd9343;
  transition-delay: 0s;
}

#undertitle {
  opacity: 1;
  font-size: 0.8em;
  text-align: center;
}
#undertitle.invisible {
  opacity: 0;
}
#undertitle.transition {
  transition: opacity 0.5s;
}

/*# sourceMappingURL=title.css.map */