.typing {
    font-size: 2.5rem;
    border-right: 1px solid var(--cursor-color);
    overflow: hidden;
    white-space: nowrap;
    animation:
        typing 2s steps(30, end) forwards,
        blinking 1s steps(1, end) 2,
        removeCursor 0s 1s forwards;
    letter-spacing: .10em;
    display: inline-block;
    max-width: max-content;
    margin: 0px;
}

#typing2 {
    font-size: 2.5rem;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .10em;
    width: 0;
    display: inline-block;
    max-width: max-content;
    margin: 10px;
}

.typing2 {
    border-right: 1px solid var(--cursor-color);
    animation:
        typing2 2s steps(30, end) forwards,
        blinking 1s steps(1, end) infinite,
        removeCursor 0s 1s forwards;
}


#typing3 {
    font-size: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .10em;
    width: 0;
    display: inline-block;
    max-width: max-content;
    margin: 10px;
}

.typing3 {
    border-right: 1px solid var(--cursor-color);
    animation:
        typing3 2s steps(30, end) forwards,
        blinking 1s steps(1, end) infinite,
        removeCursor 0s 1s forwards;
}

#typing4 {
    font-size: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .10em;
    width: 0;
    display: inline-block;
    max-width: max-content;
    margin: 10px;
}

.typing4 {
    border-right: 1px solid var(--cursor-color);
    animation:
        typing4 2s steps(30, end) forwards,
        blinking 1s steps(1, end) infinite;
        
}

@keyframes typing {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes typing2 {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes typing3 {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes typing4 {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes removeCursor {
    to {
        border-right: none;
    }
}

@keyframes blinking {
    0% {
        border-color: var(--cursor-color)
    }

    50% {
        border-color: transparent
    }

    100% {
        border-color: var(--cursor-color)
    }
}