.title {
  color: transparent; /* hides the original text */
}

.title-container {
  position: absolute;
  top: 50px;
  width: 100%;
  text-align: center;
}

.title span.letter-wrap {
  display: inline-block;
  user-select: none;
  cursor: grab;
  font-size: inherit;
  color: #ffffff;
  position: relative;
}

.title span.letter-wrap:active {
  cursor: grabbing;
}

.title span.letter-inner {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--tx,0px), var(--ty,0px)) scale(1);
}

.title span.letter-wrap:hover .letter-inner {
  color: #9D72E4;
}

.title span.space {
  display: inline-block;
}

@keyframes titleSpawn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.title-spawn {
  animation: titleSpawn 0.6s ease-in-out forwards;
}

@keyframes title_Idle {
  0%   { transform: translate(0px, 0px); }
  10%  { transform: translate(2px, -2px); }
  20%  { transform: translate(4px, -3px); }
  30%  { transform: translate(6px, -1px); }
  40%  { transform: translate(5px, 2px); }
  50%  { transform: translate(3px, 4px); }
  60%  { transform: translate(0px, 5px); }
  70%  { transform: translate(-3px, 4px); }
  80%  { transform: translate(-5px, 2px); }
  90%  { transform: translate(-4px, -1px); }
  100% { transform: translate(0px, 0px); }
}

.title-Idle {
  animation: title_Idle 10s ease-in-out infinite;
}

.title-Idle:hover {
  animation-play-state: paused;
}