/* wwwroot/css/site.css */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes erasing {
    from {
        width: 100%
    }

    to {
        width: 0
    }
}

.typing-effect {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid #000;
    animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    color: transparent;
}

.erasing-effect {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid #000;
    animation: erasing 2s steps(30, end), blink-caret 0.75s step-end infinite;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    color: transparent;
}

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: black
    }
}