/* np_typing.css */

typing-text {
    /* display:block; */
    /* font-size:2vw; */
    line-height: 1.25;
    position: relative;
    /* left:50%; */
    transition: transform 49ms linear; /* timing is factor of js interval delay amount */
}
.not typing-text {
    /* additional rules for special animation sequence */
    padding:10px;
    transition: all 250ms linear;
}

/* do not collapse space, so element width measures accurately */
.typing {
    white-space: pre;
}

typing-text.button {
    background-color:#CCCCCC;
    color:black;
    cursor: pointer;
}
typing-text.glowing {
    animation:shadow-glow 2000ms linear infinite;
}

@keyframes shadow-glow {
    from, to {
        box-shadow: 0px 0px 4px 0px white;
    }
    30%,70% {
        box-shadow: 0px 0px 12px 0px white;
    }
}

.typing,.blinking-cursor {
    display: inline-block;
}

.blinking-cursor {
    position: relative;
    top:1px;
    margin-left:5px;
    width:4px;
    height:0.9em;
    background-color: white;
    animation: blink 750ms step-end infinite;
}
.blinking-cursor.hidden {
    margin-left:0px;
    width:0px;
    animation:none;
}

@keyframes blink {
    from, to {
        background-color:transparent;
    }
    50% {
        background-color:white;
    }
}