body header figure h3 {
    width: max-content;
    position: relative;
    top: 0;
    left: 0;
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
    opacity: 0;
    display: none;
    float: left;
}

body header figure h3::before,
body header figure h3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body header figure h3::before {
    background-color: var(--bg-color);
    animation: typewriter var(--typeSpeed) steps(var(--steps)) 1s forwards;
}

body header figure h3::after {
    width: 0.15em;
    background-color: var(--red);
    animation: typewriter var(--typeSpeed) steps(var(--steps)) 1s forwards, blink .75s linear infinite;
}

.active {
    display: block;
    animation: slideOut 3.2s ease;
}

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

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

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateY(0%);
    }

    85% {
        transform: translateY(0%);
    }

    99% {
        opacity: 1;
    }

    100% {
        transform: translateY(-150%);
        opacity: 0;
    }
}