/* The typewriter cursor effect */
/* @keyframes blink-caret{
    from, to{ border-color: transparent }
    50% { border-color: black; } 
} */

@keyframes blink-caret {
    0%, 49% { opacity: 1; }    /* Visible from 0% to just before 50% */
    50%, 100% { opacity: 0; }  /* Invisible from 50% to 100% */
}


/* The typing effect */
@keyframes typing{
    from{max-width: 0}
    to {max-width:100%}
}


html, body {
    height: 100%;
    overflow: hidden;
}

body{
    margin: 0;
    background-color: white;
    position: relative;
    overflow: hidden;
}

.paint {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 0;
    height: 0;
    background-color: #ffe8ce; /* The color we're "painting" */
    z-index: -100;
    transition: width 1.25s, height 1.5s; /* Splitting transitions */
}

.typewriter {
    position: relative;
    letter-spacing: .15em;
    z-index: 2;
}

.typewriter.active::after {
    content: '|';  /* This is the blinking caret. */
    opacity: 1;
    animation: blink-caret .55s infinite;
}