.key,.locks,.shift{display:flex}.key,.off{color:var(--key-color)}.color-themes,.key{font-family:var(--font-m);text-align:center}.color-themes,.key,.keyboard .footer,.notes-wrapper,.tech-love,.title{text-align:center}:root{--keyboard-bg-color: #a6abb0;--key-bg-color: white;--key-color: black;--lock-on-color: #4338ca;--font-b: "vr-b", sans-serif;--font-m: "vr-m", sans-serif }.light-off{background-color:#000000e6!important}.key{background-color:var(--key-bg-color);font-size:12px;width:48px;height:40px;flex-direction:column;justify-content:center;align-items:center;margin:0 4px;padding:0 2px;border-radius:10px;box-shadow:0 5px #0003}.keyboard-parent{overflow:auto;padding:25px 0}.key-press,.key:hover{cursor:pointer;box-shadow:0 2px #0003;transform:translateY(3px);-webkit-transform:translateY(2px);transition:.1s ease-in-out;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-o-transition:.1s ease-in-out}.key-empty{background-color:transparent;box-shadow:none}.key i{margin-top:1px}.key .fas{font-size:11px}.key.large{padding-top:5px;font-size:18px}.key.large i{font-size:18px;margin-top:0}i.underscore{margin-top:-8px}.backspace,.tab{width:80px}.enter,.num-ins{width:100px}.spacebar{width:405px;font-size:18px}.shift{flex-flow:row nowrap}.l-s{width:95px}.r-s{width:140px}.c-menu i{border:1px solid #f5f5f5;padding:3px}.light-key,.locks{border-radius:5px}.num-special{justify-content:flex-start;padding-top:5px}.num-large{margin-bottom:-58px;height:100px}.locks{flex-direction:row;justify-content:center;align-items:center;width:200px;margin-top:5px;margin-right:10px;background-color:var(--key-bg-color)}.lock{margin:5px 22px;width:135px}.light-key{padding:3px 5px}.off{border:1px solid var(--key-color)}.keyboard .footer a:hover,.on{color:#000}.on{border:1px solid #4ade80;background-color:#4ade80}.keyboard{background-color:var(--keyboard-bg-color);width:1296px;margin:10px auto;padding:20px 10px;border-radius:15px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;box-shadow:0 0 20px #0003,0 14px 18px #00000038}.keyboard .row{display:grid;grid-template-columns:auto .2fr .2fr;grid-gap:5px;padding:5px;margin-top:5px}.group,.mini-group{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.mini-group{margin-left:28px}.right{display:flex;justify-content:flex-end}.button,.keyboard .footer,.notes-wrapper b,.title{font-family:var(--font-b)}.button-wrapper .button{width:150px}.button{height:45px;background-color:transparent;border:1px solid #5b5b5b;border-radius:25px;color:#333;margin:5px 15px;font-size:16px}.button:hover{cursor:pointer;background-color:#5b5b5b;color:#fff;transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;box-shadow:0 12px 15px #0000003d,0 17px 50px #00000030}.custom-theme{padding-top:50px;display:none}.cp-wrapper{display:flex;flex-flow:row wrap;justify-content:center;align-items:center}.cp-wrapper .button{margin:20px 15px;padding:5px 25px}.notes,.sub-title{font-family:var(--font-m);letter-spacing:1px}.notes-wrapper{padding-top:40px}.notes-wrapper .title{line-height:0}.notes-wrapper .button{padding:5px 25px;width:150px}.notes{max-width:960px;margin:0 auto;display:none}.notes p{background-color:#eee;border-radius:20px;padding:20px 40px;line-height:1.5;margin:20px 0}.show-notes{display:block}.keyboard .footer{background:linear-gradient(270deg,#f36b38,#f2354d);background-size:100% 100%;-webkit-animation:8s infinite gradientFill;-moz-animation:8s infinite gradientFill;animation:8s infinite gradientFill;margin:2rem 0 0;padding:0}.tech-love{margin-bottom:0}.keyboard .footer a{position:relative;text-decoration:none;color:#fff}.keyboard .footer a:before{content:"";position:absolute;width:100%;height:2px;bottom:-2px;left:0;background:#000;visibility:hidden;border-radius:10px;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:.3s cubic-bezier(.25,.46,.45,.94);transition:.3s cubic-bezier(.25,.46,.45,.94)}.keyboard .footer a:hover:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}@-webkit-keyframes gradientFill{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@-moz-keyframes gradientFill{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes gradientFill{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.device-keyboard-screen #keyboardEventFeed{max-height:220px;overflow:auto}.device-keyboard-screen #keyboardEventFeed li{line-height:1.4;margin-bottom:.35rem}