:root {
    --twSpeed: 1.5;
    --typewriterCharacters: 0;
}

.typeWriting {
    font-size: 20px;
    position: relative;
    font-family: "Source Code Pro", monospace;
    position: relative;
    width: max-content;
    color: var(--color-black);
}

.typeWriting::before,
.typeWriting::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.typeWriting::before {
    background: var(--main-back);
    animation: typewriter var(--twSpeed) steps(var(--typewriterCharacters)) 1s forwards;
}

.typeWriting::after {
    width: 0.125em;
    background: var(--color-black);
    animation: typewriter var(--twSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite;
}

@keyframes typewriter {
    to {
        left: 100%;
    }
}

@keyframes blink {
    to {
        background: transparent;
    }
}