Typing Effect Keystone Animation Tweak

I have a typing effect that I like, I want to use it for all my page titles, but the problem is it works by specifying a width. This would be fine for a homepage with a slogan, but if I ever decide to change it all of my width values would need to change too. Is there any way this can still function the same without being based on a width?

The example is what I'm using on my homepage, it's a slogan. But my title's would be single line text like: About, Contact, Support, News, etc.

My code looks like:

<div id="head">
    <div class="wrap">
        <div>
            <p>We Create</p>
            <p>Software for</p>
            <p>People!!</p>
        </div>
    </div>
</div>

My CSS looks like:

#head {
    background: #000;
  height: 700px;
    overflow: hidden;
    position: relative;
}

#head .wrap {
    height: 100%;
    margin: 0 auto;
    max-width: 850px;
    position: relative;
    width: 100%;
}

#head .wrap div {
    align-items: center;
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;
    height: 100%;
    position: relative;
    width: 100%;
}

#head .wrap div p {
    border-right: 5px solid #b5cfd7;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 85px;
    font-weight: 900;
    margin-left: 10px;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
}

#head .wrap div p:nth-child(1) {
    animation: type 2s steps(20, end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    width: 575px;
}

#head .wrap div p:nth-child(2) {
    animation: type2 2s steps(20, end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
    width: 775px;
}

#head .wrap div p:nth-child(3) {
    animation: type3 2s steps(20, end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
    width: 475px;
}

/* Animation */
@keyframes type {
    0% {
        width: 0;
    }
    99.9% {
        border-right: 5px solid #b5cfd7;
    }
    100% {
        border: none;
    }
}

/* Animation */
@keyframes type2 {
    0% {
        width: 0;
    }
    1% {
        opacity: 1;
    }
    99.9% {
        border-right: 5px solid #b5cfd7;
    }
    100% {
        border: none;
        opacity: 1;
    }
}

/* Animation */
@keyframes type3 {
    0% {
        width: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Animation */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

Live Example: https://codepen.io/joshrodgers/pen/BaxxQzo

Any help is appreciated!

Thanks,
Josh

Ok...

So, I found a solution...it uses some JS, but that's the only way I could get it to work!

Here's how my code looks now:

<div id="head">
    <div class="wrap">
        <div class="row">
            <div class="text">
                <p>We create</p>
                <p>Software for</p>
                <p>People!!</p>
            </div>
        <div class="title"></div>
    </div>
</div>

The CSS:

#head {
    background: #000;
    overflow: hidden;
    position: relative;
}

#head .wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    margin: 0 auto;
    max-width: 850px;
    position: relative;
    text-align: center;
    width: 100%;
}

#head .row {
    align-items: center;
    display: flex;
  height: 100vh;
    justify-content: center;
}

#head .text {
    display: none;
}

#head .title {
    position: relative;
    z-index: 1;
}

#head .title span {
    color: #fff;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 85px;
    font-weight: 900;
    letter-spacing: 2px;
    height: 90px;
    min-width: 5px;
    text-transform: uppercase;
}

#head .cursor:after {
    animation: blink 1s linear infinite alternate;
    background: #b5cfd7;
    content: "";
    display: inline-block;
    height: 75%;
  margin-left: 30px;
    opacity: 0;
    width: 5px;
}

/* Animation */
@keyframes blink {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

The JS:

var sentences = [];
var currentText;

$(document).ready(function(){
    $('.text p').each(function(){
        var text = $(this).text();
        text += " ";
        sentences.push(text);
    });
    currentText = sentences.shift();
    typeWord(currentText);
});

jQuery.fn.extend({
    appendChars: function(char){
        $(this).text(char);
    }
});

function spliter(string){
    return string.trim().split("");
}

function appendTextLine(){
    return $('<span class=""></span>').appendTo('.title');
}

function typeWord(text){
    if (!text){
        return;
    }
    
    var charArray = [];
    for (i = 0; i < text.length; i++){
        var char = text.slice(0,i);
        charArray.push(char);
    }
    
    var textLine = appendTextLine();
    $('.cursor').removeClass('cursor');
    textLine.addClass('cursor');
    
    var interval = setInterval(function(){
        firstChar = charArray.shift();
        $(textLine).appendChars(firstChar);
        
        if (charArray.length === 0){
            currentText = sentences.shift();
            typeWord(currentText);
            clearInterval(interval);
        }
    },100);
}

I have a pen here: https://codepen.io/joshrodgers/pen/yLjjzYb
Single line text version here: https://codepen.io/joshrodgers/pen/RwyJroQ

There were two problems with my initial code, it wouldn't work with dynamic text, which this solves because it's not based on a width and two the text was not centered in the window, which I didn't realize when I create this post, but the solution also solves that issue as well.

Hope this helps someone!

Thanks,
Josh