.keyboard{position:fixed;left:0;bottom:0;width:100%;padding:5px 0;background-color:#53a6bb;box-shadow:0 0 20px #00000080;user-select:none;transition:bottom .4s;height:20%;min-height:210px;max-height:260px;pointer-events:none;z-index:90}.keyboard--hidden{bottom:-100%}.keyboard__position{text-align:center}#leftHand{position:absolute;top:35%;left:calc(50% - 280px)}#rightHand{position:absolute;top:35%;left:calc(50% - 70px)}.keyboard__keys{display:inline-block;text-align:left}.keyboard__key{height:40px;width:40px;margin:3px;border-radius:4px;border:none;background:rgba(255,255,255,.2);color:#fff;vertical-align:top;padding:0;-webkit-tap-highlight-color:transparent;position:relative}.keyboard__key--leftLittle{background:rgba(255,0,0,.2)}.keyboard__key--leftRing{background:rgba(255,255,0,.2)}.keyboard__key--leftMiddle{background:rgba(0,255,0,.2)}.keyboard__key--leftIndex{background:rgba(0,255,255,.2)}.keyboard__key--rightIndex{background:rgba(0,0,255,.2)}.keyboard__key--rightMiddle{background:rgba(255,0,255,.2)}.keyboard__key--rightRing{background:rgba(255,0,0,.2)}.keyboard__key--rightLittle{background:rgba(255,255,0,.2)}.pushed{background:rgba(255,255,255,.8);color:#000}.keyboard__key:active{background:rgba(255,255,255,.12)}.keyboard__key--wide{width:90px}.keyboard__key--enter{width:70px;height:45px}.keyboard__key--tab{width:70px}.keyboard__key--caps{width:85px}.keyboard__key--shift{width:110px}.keyboard__key--extra-wide{width:500px}.keyboard__key--activatable:after{content:"";top:10px;right:10px;position:absolute;width:8px;height:8px;background:rgba(0,0,0,.4);border-radius:50%}.keyboard__key--active:after{background:#08ff00}.keyboard__key--dark{background:rgba(0,0,0,.5)}.nullDiv{height:260px}