.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.cat-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.cat {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffc600;
  border-radius: 50%;
  animation: rotate 3s linear infinite;
}

.head {
  width: 100px;
  height: 100px;
  background-color: #ffc600;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 50px;
}

.body {
  width: 100px;
  height: 100px;
  background-color: #ffc600;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 50px;
}

.leg {
  width: 50px;
  height: 50px;
  background-color: #ffc600;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
}

.leg-1 {
  left: 25px;
  animation: leg-move 3s ease-in-out infinite;
}

.leg-2 {
  left: 75px;
  animation: leg-move 3s ease-in-out infinite;
  animation-delay: 1s;
}

.leg-3 {
  right: 25px;
  animation: leg-move 3s ease-in-out infinite;
  animation-delay: 2s;
}

.leg-4 {
  right: 75px;
  animation: leg-move 3s ease-in-out infinite;
  animation-delay: 3s;
}

.tail {
  width: 50px;
  height: 100px;
  background-color: #ffc600;
  border-radius: 50% 0 50% 0;
  position: absolute;
  top: 50px;
  right: -25px;
  animation: tail-move 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes leg-move {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 50px;
  }
  100% {
    bottom: 0;
  }
}

@keyframes tail-move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}