.typing {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #fff;
    /* cursor effect */
    width: 0;
    animation: typing 2s steps(30, end) forwards, blink 0.7s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 10ch
    }

    /* Adjust to match your text length */
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

/* Stop blinking after typing finishes */
.typing.done {
    border-right: none;
}

.penguin {
    width: 150px;
    animation: walk 3s ease-in-out infinite;
    animation-delay: 4s;
}

@keyframes walk {
    0% {
        transform: translateX(0) rotate(-3deg);
    }

    25% {
        transform: translateX(-15px) rotate(3deg);
    }

    50% {
        transform: translateX(0) rotate(-3deg);
    }

    75% {
        transform: translateX(15px) rotate(3deg);
    }

    100% {
        transform: translateX(0) rotate(-3deg);
    }
}

.delayed-1 {
    animation-delay: 1s;
}

.delayed-2 {
    animation-delay: 2s;
}

.delayed-3 {
    animation-delay: 3s;
}

.delayed-4 {
    animation-delay: 4s;
}

.delayed-5 {
    animation-delay: 5s;
}