/* match these to your string length (13 chars for "annacodes/dev") */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 13ch
    }
}

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

.type {
    width: 13ch;
    /* characters revealed */
    animation:
        typing 1.8s steps(13, end) 1,
        /* speed & steps */
        caret .9s step-end infinite;
    /* blinking cursor */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .type {
        animation: none;
        border-right-width: 0;
        width: auto;
    }
}