html {
    height: 100%;
}

body {
    font-family: monospace;
    color: #fff;
    background-color: #000;
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

#heading {
    margin: auto;
}

#heading h1 {
    overflow: hidden;
    border-right: .15em solid #fff;
    white-space: nowrap;
    animation: 
        typing .3s steps(10, end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #fff; }
}