.container {
    margin-left: 25px;
    margin-right: 0;
    width: 95%;
}

.keyboard {
    display: grid;
    grid-template-columns: repeat(30, 1.9vw);
    grid-template-rows: repeat(5, 4.75vw);
    grid-gap: 0.95vw;
    background: #c2ccdb;
    padding: 1.73vw;
    border-radius: 1.27vw;
    background: #d8dee8;
    box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.633vw #c2ccdb;
    margin-top: 20px;
}

.keyboard .key {
    border-radius: 0.76vw;
    grid-column: auto/span 2;
    width: 100%;
    height: 100%;
    padding: 0.475vw;
    font-size: 1.9vw;
    display: grid;
    align-items: center;
    color: #8a94a4;
    justify-content: center;
    cursor: pointer;
    background: #d8dee8;
    box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.633vw #c2ccdb;
    transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
    user-select: none;
    color: #fff;
}

.keyboard .key:hover,
.keyboard .key.pressed {
    transform: perspective(300px) scale(1.15);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #f6f8fa, inset 0.32vw 0.32vw 0.633vw #c2ccdb;
    color: #fff;
    text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
    background-color: #ef585d;
}

/* pollex:大拇指；index：食指；middle：中指；medical：无名指；little：小指 */
.keyboard .little {
    background-color: #a0a4ed;
}

.keyboard .medical {
    background-color: #83eaf4;
}

.keyboard .middle {
    background-color: #80edd4;
}

.keyboard .index {
    background-color: #f17dc5;
}

.keyboard .rindex {
    background-color: #bd88f5;
}

.keyboard .pollex {
    background-color: #efd483;
}

.keyboard .key.dotted {
    position: relative;
}

.keyboard .key.dotted::before {
    content: '_';
    font-weight: bold;
    color: #b5c0d2;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.keyboard .key.backspace {
    background: #d63031;
    color: #f7d6d6;
}

.keyboard .key.backspace:hover,
.keyboard .key.backspace.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #e57c7d, inset 0.32vw 0.32vw 0.633vw #991e1f;
    color: #fff;
    text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
    background-color: #ef58dd;
}

.keyboard .key.shift {
    background: #1e90ff;
    color: #d2e9ff;
}

.keyboard .key.shift:hover,
.keyboard .key.shift.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #71b9ff, inset 0.32vw 0.32vw 0.633vw #0065c8;
    color: #fff;
    text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
    background-color: #ef585d;
}

.keyboard .key.ctrl {
    background: #be2edd;
    color: #f2d5f8;
}

.keyboard .key.ctrl:hover,
.keyboard .key.ctrl.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #d57be9, inset 0.32vw 0.32vw 0.633vw #891aa1;
    color: #fff;
    text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
    background-color: #ef585d;
}

.keyboard .key.win {
    background: #f7b731;
    color: #fdf1d6;
}

.keyboard .key.win:hover,
.keyboard .key.win.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #fad17d, inset 0.32vw 0.32vw 0.633vw #c78908;
    color: #fff;
    text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
    background-color: #ef585d;
}

.keyboard .key.alt {
    background: #5352ed;
    color: #dddcfb;
}

.keyboard .key.alt:hover,
.keyboard .key.alt.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #9291f3, inset 0.32vw 0.32vw 0.633vw #1615ca;
    color: #fff;
    text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
    background-color: #ef585d;
}

.keyboard .key.fn {
    background: #26de81;
    color: #d4f8e6;
}

.keyboard .key.fn:hover,
.keyboard .key.fn.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #76eaaf, inset 0.32vw 0.32vw 0.633vw #189e5a;
    color: #fff;
    text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
}

.keyboard .key.caps {
    background: #ee5a24;
    color: #fcded3;
    position: relative;
}

.keyboard .key.caps:hover,
.keyboard .key.caps.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #f49675, inset 0.32vw 0.32vw 0.633vw #b23a0e;
    color: #fff;
    text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
    background-color: #ef58cc;
}

.keyboard .key.caps::before {
    content: '';
    position: absolute;
    width: 0.5vw;
    height: 0.5vw;
    background: #f6ac91;
    top: 1vw;
    right: 1vw;
    border-radius: 50%;
}

.keyboard .key.caps.on::before {
    background: #fbded3;
    box-shadow: 0 0 0.5vw 0.2vw rgba(255, 255, 255, 0.8);
}

.keyboard .key.tab {
    background: #12cbc4;
    color: #cafaf8;
}

.keyboard .key.tab:hover,
.keyboard .key.tab.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #5aede7, inset 0.32vw 0.32vw 0.633vw #0d8e89;
    color: #fff;
    text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
    background-color: #ef585d;
}

.keyboard .key.enter {
    background: #fdcb6e;
    color: #fff5e2;
}

.keyboard .key.enter:hover,
.keyboard .key.enter.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.1583vw #fddea3, inset 0.32vw 0.32vw 0.633vw #fba403;
    color: #fff;
    text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
    background-color: #ef585d;
}

.keyboard .key.s2 {
    font-size: 1.73vw;
    grid-column: auto/span 2;
}

.keyboard .key.s3 {
    font-size: 1.73vw;
    grid-column: auto/span 3;
}

.keyboard .key.s4 {
    font-size: 1.73vw;
    grid-column: auto/span 4;
}

.keyboard .key.s5 {
    font-size: 1.73vw;
    grid-column: auto/span 5;
}

.keyboard .key.s6 {
    font-size: 1.73vw;
    grid-column: auto/span 6;
}

.keyboard .key.s12 {
    font-size: 1.73vw;
    grid-column: auto/span 12;
}

.keyboard .key[on-shift] {
    font-size: 1.462vw;
    justify-items: center;
}

.keyboard .key[on-shift]::before {
    content: attr(on-shift);
    align-items: end;
}




#msg {
    float: right;
    margin-top: 6px;
    margin-left: 10px;
}

form * {
    margin: 0 6px 6px 0;
    vertical-align: middle
}

label[for] {
    display: inline-block;
    margin-left: -6px;
    -moz-user-select: none;
    user-select: none
}

textarea {
    box-sizing: border-box;
    height: 50px;
    margin-bottom: 2px;
    padding: 0;
    resize: none;
    width: 100%;
    font-size: 20px;
}

.hints textarea {
    width: calc(100% - 160px)
}

.txtInput {
    font-size: 35px;
    letter-spacing: 5px;
    vertical-align: middle;
    overflow-x: visible;
    overflow-y: hidden;
    margin-top: 20px;
    margin-bottom: 15px;
    caret-color: red;
    padding-left: 10px;
}

#txtInput.active {
    background-color: #dfd
}

#txtInput.error {
    background-color: red;
    background: #f00;
}

#hands {
    float: right;
    position: relative;
    width: 150px;
    height: 90px;
    /* overflow: hidden; */
    display: none
}

.hints #hands {
    display: block
}

#hands span {
    background-position: left top;
    background-repeat: no-repeat;
    height: 90px;
    position: absolute;
    top: 0
}

#leftHand {
    left: 0;
    width: 52px;
    background-image: url(../images/leftHand.png)
}

#leftThumb {
    left: 52px;
    width: 23px;
    background-image: url(../images/leftThumb.png)
}

#rightThumb {
    left: 75px;
    width: 23px;
    background-image: url(../images/rightThumb.png)
}

#rightHand {
    left: 97px;
    width: 52px;
    background-image: url(../images/rightHand.png)
}

.l5 #leftHand,
.r5 #rightHand {
    background-position-y: -90px
}

.l4 #leftHand,
.r4 #rightHand {
    background-position-y: -180px
}

.l3 #leftHand,
.r3 #rightHand {
    background-position-y: -270px
}

.l2 #leftHand,
.r2 #rightHand {
    background-position-y: -360px
}

.l1 #leftThumb,
.m1 #leftThumb,
.m1 #rightThumb,
.r1 #rightThumb {
    background-position-y: -90px
}