#typing-field {
    white-space: pre-wrap;
}

#typing-panel {
     max-height: 30vh;
}

.text-current {
    -webkit-animation: blinking-cursor 0.6s infinite;
    -moz-animation:    blinking-cursor 0.6s infinite;
    animation:         blinking-cursor 0.6s infinite;
}

.text-error {
    background: #FF0039;
    color: #fff;
}

@-webkit-keyframes blinking-cursor {
    0% { 
        background-color: #2780E3; 
        color: #fff;
    }
    49% { 
        background-color: #2780E3; 
        color: #fff;
    }
    50% { 
        background-color: transparent; 
        color: #333;
    }
    99%  { 
        background-color: transparent; 
        color: #333;
    }
    100% { 
        background-color: #2780E3; 
        color: #fff;
    }
}

@-moz-keyframes blinking-cursor {
    0% { 
        background-color: #2780E3; 
        color: #fff;
    }
    49% { 
        background-color: #2780E3; 
        color: #fff;
    }
    50% { 
        background-color: transparent; 
        color: #333;
    }
    99%  { 
        background-color: transparent; 
        color: #333;
    }
    100% { 
        background-color: #2780E3; 
        color: #fff;
    }
}
@keyframes blinking-cursor {
    0% { 
        background-color: #2780E3; 
        color: #fff;
    }
    49% { 
        background-color: #2780E3; 
        color: #fff;
    }
    50% { 
        background-color: transparent; 
        color: #333;
    }
    99%  { 
        background-color: transparent; 
        color: #333;
    }
    100% { 
        background-color: #2780E3; 
        color: #fff;
    }
}

/* Keyboard and hands*/
/* Every key */
#keyboard ul {
    margin: 0;
    padding: 0 0 3px 0;
}

.key {
    display: inline-block;
    font-size: 2.5vh;
    padding-right: 1%;
    height: 5vh;
    line-height: 5vh;
    border: 1px solid #aaa;
    border-radius: 2px;
    text-align: center;
    box-sizing: border-box;
}

/* Small keys */
#keyboard .key-normal {
    width: 6.4%;
    
}

#key-backspace {
    width: 10%;
}

#key-tab {
    width: 8%;
}

#key-backslash {
    width: 8.4%;
}

#key-capslock {
    width: 12%;
}

#key-enter {
    width: 11.2%;
}

#key-lshift {
    width: 15%
}

#key-rshift {
    width: 15%
}

#key-space {
    width: 50%;
    margin: 0 25% 0 25%;
}

.key-current {
    color: #fff;
}

.key-current.key-index {
    border: 1px solid #3FB618;
    background-color: #3FB618;
}

.key-current.key-middle {
    border: 1px solid #9954BB;
    background-color: #9954BB;
}

.key-current.key-ring {
    border: 1px solid #FF7518;
    background-color: #FF7518;
}

.key-current.key-pinky {
    border: 1px solid #FF0039;
    background-color: #FF0039;
}

.key-current.key-shift, .key-current#key-space {
    border: 1px solid #2780E3;
    background-color: #2780E3;
}

.key-shifted {
    text-transform: capitalize; 
}

#left-hand, #right-hand {
    background-size: contain;
    background-repeat: no-repeat;
    height: 28vh;
}

#left-hand {
    background-position: right center;
    background-image: url("../img/hands/left.svg");
}

#left-hand.index {
    background-image: url("../img/hands/left-index.svg");
}

#left-hand.middle{
    background-image: url("../img/hands/left-middle.svg");
}

#left-hand.ring{
    background-image: url("../img/hands/left-ring.svg");
}

#left-hand.pinky{
    background-image: url("../img/hands/left-pinky.svg");
}

#right-hand {
    background-position: left center;
    background-image: url("../img/hands/right.svg");
}

#right-hand.index {
    background-image: url("../img/hands/right-index.svg");
}

#right-hand.middle{
    background-image: url("../img/hands/right-middle.svg");
}

#right-hand.ring{
    background-image: url("../img/hands/right-ring.svg");
}

#right-hand.pinky{
    background-image: url("../img/hands/right-pinky.svg");
}