/* styles.css */
.typewriter {
    display: inline-block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%; /* Asegura que el contenedor no se expanda más allá de su contenedor padre */
    position: relative;
    color: #7f7f7f;
}

.typewriter .cursor {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0, -50%);
    animation: blink-circle 0.75s step-end infinite;
}

@keyframes blink-circle {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

.typewriter-finished {
    /* Añadir estilos o cambiar la apariencia del elemento después de la animación */
    color: black; /* Ejemplo de estilo */
}