.type-this {
    position: relative;
    font-family: "Source Code Pro", monospace;
    width: fit-content;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &::before {
        background: var(--color-secondary);
        animation: typewriter 1s steps(15) forwards;
    }

    &::after {
        width: 0.125em;
        background: var(--color-font);
        animation:
            typewriter 1s steps(15) forwards,
            blink 750ms steps(2, start) 7 forwards;
    }
}

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

@keyframes blink {
    to {
        visibility: hidden;
    }
}





.typewriter{
    font-family: "Source Code Pro", monospace;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid;
    border-color: transparent;
    animation: 
        typing 2s steps(15) forwards,
        blinking 750ms steps(2, start) 6 forwards;
}

@keyframes typing {
    from {
        width: 0;
    }  

    to {
        width: 100%;
    }
}

@keyframes blinking {
    50% {
        border-color: inherit;
    }
}