.typewriter h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .17em solid orange; /* The typewriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .17em; /* Adjust as needed */
    animation: typing 3s steps(30, end), blinking-cursor .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {

    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* The typewriter cursor effect */
@keyframes blinking-cursor {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange;
    }
}

@media screen and (max-width: 800px) {
    .typewriter h1 {
        white-space: unset; /* Keeps the content on a single line */
        margin: 0 auto; /* Gives that scrolling effect as the typing happens */
        letter-spacing: .17em; /* Adjust as needed */
        animation: none;
        border-right: unset;
        text-align: center;
    }
}