/* Typing animation */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Cursor animations */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

.typing-effect {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid orange;
    /* Simulates the cursor */
    width: max-content;
    animation: typing 5s steps(40, max-content), blink-caret .75s step-end infinite;
}