.hero-section h1 {
    position: relative;
}

.hero-section h1::before,
.hero-section h1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero-section h1::before {
    background: hsl(220, 6%, 10%);
    animation: typewriter 6s steps(17) 1s forwards;
}

.hero-section h1::after {
    width: 0.10em;
    background: hsl(150, 84%, 48%);
    animation: typewriter 6s steps(17) 1s forwards,
               blink 750ms steps(17) infinite;
}

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

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