.typewriter-11 {
    animation: typewriter 2s 1s 1 alternate both, blinkTextCursor 500ms steps(11) infinite normal;
    animation-iteration-count: infinite;
    align-self: center;
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

.typewriter-container {
    width: auto;
    align-self: center;
}

.line {
    border-right: 2px solid var(--blue);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes typewriter {
    0%,
    10% {
        width: 0;
    }
    17.27% {
        width: 10%;
    }
    24.54% {
        width: 20%;
    }
    31.81% {
        width: 30%;
    }
    39.09% {
        width: 35%;
    }
    46.36% {
        width: 47%;
    }
    53.63% {
        width: 55%;
    }
    60.90% {
        width: 65%;
    }
    68.18% {
        width: 70%;
    }
    75.45% {
        width: 78%;
    }
    82.72% {
        width: 88%;
    }
    90%,
    100% {
        width: 100%;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: var(--blue);
    }
    to {
        border-right-color: transparent;
    }
}