html{width:100vw;height:100vh}body{margin:0;padding:0;font-family:Helvetica,Ariel,sans-serif;width:100%;height:100%;font-size:20px}@supports (-moz-appearance:none){body{background-color:#000}}#root{width:100%;height:100%}.key-component{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;border-radius:.5rem}.key-component>img,.key-component div,.key-component span{pointer-events:none}.key-component.hover,.key-component:hover{background-color:#485a63}.key-component.key-down{background-color:#a2b3bc}.key-component.key-up{-webkit-animation:highlight 1s;animation:highlight 1s}@-webkit-keyframes highlight{0%{background-color:#a2b3bc}to{background-color:auto}}@keyframes highlight{0%{background-color:#a2b3bc}to{background-color:auto}}.center-board{background-color:#283237;color:#fff;height:100%;width:100%;border-radius:.6rem;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.center-board .key-area{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;height:90%}.center-board .key-area .key-row{display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;-webkit-flex:1 1 auto;flex:1 1 auto}.center-board .key-area .key-row .key{-webkit-flex:2 0 auto;flex:2 0 auto}.center-board .key-area .key-row .key-offset-margin{-webkit-flex:1 0 auto;flex:1 0 auto}.center-board .key-area .key-row .spacebar-container{-webkit-flex:12 0 auto;flex:12 0 auto;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.center-board .key-area .key-row .spacebar-container .spacebar{width:98%;height:80%;background-color:#3d4d55;border-radius:.6rem;color:#a6a6a6}.center-board .key-area .key-row .spacebar-container .spacebar.hover,.center-board .key-area .key-row .spacebar-container .spacebar:hover{background-color:#485a63}.center-board .key-area .key-row .spacebar-container .spacebar:active{background-color:#688390}.shift-key-icon{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;justify-conten:center;-webkit-align-items:center;align-items:center}.shift-key-icon .shift-arrow-triangle{width:0;height:0;border-left:.45em solid transparent;border-bottom:.45em solid #fff;border-right:.45em solid transparent}.shift-key-icon .shift-arrow-triangle.shift-arrow-colored{border-bottom-color:#42c695}.shift-key-icon .regular-arrow-line{height:.6em;width:.35em;background-color:#fff}.shift-key-icon .regular-arrow-line.shift-arrow-colored{background-color:#42c695}.shift-key-icon .caps-lock-arrow-line .caps-lock-line-top{height:.3em;width:.35em;background-color:#42c695}.shift-key-icon .caps-lock-arrow-line .caps-lock-line-middle{height:.2em}.shift-key-icon .caps-lock-arrow-line .caps-lock-line-bottom{height:.1em;width:.35em;background-color:#42c695}.num-pad{width:100%;height:100%;border-radius:.6rem;background-color:#283237;color:#fff;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.num-pad,.num-pad .key-area{display:-webkit-flex;display:flex}.num-pad .key-area{-webkit-flex-direction:column;flex-direction:column;width:85%;height:90%}.num-pad .key-area .key-row{display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;-webkit-flex:1 1 auto;flex:1 1 auto}.num-pad .key-area .key-row .key{-webkit-flex:1 0 auto;flex:1 0 auto}.right-pad{width:100%;height:100%;background-color:#283237;border-radius:.6rem;color:#fff;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.right-pad,.right-pad .key-area{display:-webkit-flex;display:flex}.right-pad .key-area{width:90%;height:75%;-webkit-justify-content:space-between;justify-content:space-between}.right-pad .right-key-area{-webkit-flex:0 0 100%;flex:0 0 100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.right-pad .right-key-area .arrow-pad{width:90%;height:3.75em;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;font-size:1.25em}.right-pad .right-key-area .arrow-pad .arrow-pad-row{-webkit-flex:1 1 auto;flex:1 1 auto;width:100%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.right-pad .right-key-area .arrow-pad .arrow-pad-row.arrow-pad-middle{-webkit-justify-content:space-between;justify-content:space-between}.voice-button{width:100%;padding-top:100%;position:relative;border-radius:50%;background-color:#a6a6a6}.voice-button .voice-button-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;pointer-events:none}.voice-button .voice-button-icon>div{width:50%;height:50%}.voice-button .voice-button-icon>div img{width:100%;height:100%}.voice-button svg{position:absolute;top:-224px;left:-224px;-webkit-transform:scale(.05);transform:scale(.05);fill:rgba(0,0,0,.5);pointer-events:none}.voice-button.hover,.voice-button:hover{background-color:#56cca0}.voice-button.hover svg,.voice-button:hover svg{fill:#283237}@-webkit-keyframes recordingBackground{0%{background:#f30}50%{background:#ff8000}to{background:#f30}}@keyframes recordingBackground{0%{background:#f30}50%{background:#ff8000}to{background:#f30}}.voice-button.voice-button-active{-webkit-animation:recordingBackground 5s infinite;animation:recordingBackground 5s infinite}.voice-button.voice-button-active svg{fill:#fff}.keyboard{width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.keyboard .num-pad-container{-webkit-flex:1 1 15%;flex:1 1 15%}.keyboard .center-board-container{-webkit-flex:1 1 55%;flex:1 1 55%}.keyboard .right-pad-container{-webkit-flex:1 1 15%;flex:1 1 15%}.keyboard .board-margin{-webkit-flex:1 1 2.5%;flex:1 1 2.5%}.keyboard .enter-key-area{height:100%;-webkit-flex:1 1 10%;flex:1 1 10%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.keyboard .enter-key-area .backspace-icon{width:60%;border-radius:.5rem}.keyboard .enter-key-area .backspace-icon:hover{background-color:#dde4e7}.keyboard .enter-key-area .backspace-icon img{width:100%}.keyboard .enter-key-area .return-key-container{width:60%;padding-top:10px}.keyboard .enter-key-area .return-key-container .return-key-component{border-radius:50%;background-color:#09f}.keyboard .enter-key-area .return-key-container .return-key-component.hover,.keyboard .enter-key-area .return-key-container .return-key-component:hover{background-color:#008ae6}.keyboard .enter-key-area .return-key-container .return-key{width:100%;padding-top:100%;position:relative;border-radius:50%;pointer-events:none}.keyboard .enter-key-area .voice-button-container{width:60%;padding-top:15px}.keyboard .enter-key-area .return-key-text{position:absolute;top:0;left:0;bottom:0;right:0;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;font-size:45px;font-weight:700}.keyboard .enter-key-area .return-key-text img{width:60%}
/*# sourceMappingURL=main.a3550cfb.chunk.css.map */