.text {
    /* font-size: 2rem; */
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    /* 游標效果 */
    /* border-right: 3px solid black;  */
    width: 0;
    animation: typing 4s steps(20, end) forwards,
               blink 0.7s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 15ch; } /* 顯示 20 個字元 */
}
@keyframes blink {
  50% { border-color: transparent; }
}
.gradient-text {
  /* font-size: 3rem; */
  font-weight: bold;
  background: linear-gradient(90deg, #ff0080, #7928ca, #2afadf);
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
.gradient-typewriter {
    /* font-size: 2.5rem; */
    font-weight: bold;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    /* 游標 */
    /* border-right: 3px solid black;  */
    width: 0;

    /* 漸層文字 */
    background: linear-gradient(90deg, #04660c, #44a6e7, #7dcac0);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 動畫 */
    animation: typing 4s steps(15, end) forwards,
               blink 0.7s step-end infinite,
               shine 3s linear infinite;
  }