body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{outline:none}.keyboard{margin:0 auto;width:700px;height:300px;padding:0;-webkit-flex-flow:column;flex-flow:column;-webkit-flex:4 1;flex:4 1;position:relative}.keyboard,.keys{display:-webkit-flex;display:flex}.keys{height:100%;-webkit-flex:8 1;flex:8 1;-webkit-justify-content:center;justify-content:center}.key{-webkit-flex:1 1;flex:1 1;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.key-white{-webkit-flex-flow:column;flex-flow:column;-webkit-justify-content:flex-end;justify-content:flex-end;border:1px solid #e3e3e3;color:#222;background-color:#fff;padding-bottom:10px;margin:0 1px;box-shadow:0 5px 5px #ccc}.key-black{-webkit-justify-content:center;justify-content:center;position:relative;height:70%;background-color:#333;color:#fff;width:8%;margin:0 -29px;box-shadow:0 5px 5px #999}.key-white.key-pressed{box-shadow:inset 5px 0 5px #ccc}.key-black.key-pressed{box-shadow:inset 5px 0 5px #111}.note-name{opacity:.5;font-size:12px;position:absolute;bottom:10px}.keyboard-letter{position:absolute;bottom:30px}.control-row{margin:20px auto;width:700px;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row}.control-row-group{position:relative;margin-right:50px}.control-row-title{font-size:12px;width:100%;margin:0 10px 7px}.control-item{position:relative;display:inline-block;margin:0 5px;width:60px;height:60px;border-radius:10px;background:#f9f9f9;box-shadow:0 0 2px #999;border:none;padding:0}.control-name{font-size:12px;opacity:.5;margin:10px auto 5px;text-align:center}.control-letter{margin:0 auto;text-align:center}.waves{text-align:center;margin:10px auto 20px}.button{margin:0 2px;border:1px solid #ccc;background:#f3f3f3;color:#222}.selected{border-color:#1e90ff;color:#1e90ff}
/*# sourceMappingURL=main.92d26b00.chunk.css.map */