*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:#282828;color:#e8e8e8;min-height:100vh}header{padding:20px 0;text-align:center}h1{margin-bottom:10px}nav{align-items:center;background:#1e1e1e;color:#888;display:grid;height:30px}nav a{color:#eee;padding:0 8px;text-decoration:none;transition:.1s}nav a:hover{color:#4682b4}.viewGrid{grid-row-gap:50px;grid-column-gap:20px;-webkit-column-gap:20px;column-gap:20px;display:grid;grid-template-columns:50% 50%;justify-items:center;padding:20px;row-gap:50px}span.MuiButton-label{color:#54a0dd;padding:0 10px}.DrumKit{grid-column:span 2}.DrumKit svg ellipse,.DrumKit svg path{cursor:pointer}.DrumKit svg text{fill:#fff;font-size:4px;pointer-events:none;-webkit-user-select:none;user-select:none}.Button{align-items:center;border:none;border-radius:5px;box-shadow:0 0 0 #fff;color:"black";cursor:pointer;display:grid;height:100%;justify-items:center;opacity:.5;transition:.15s;width:100%}.Button.active{box-shadow:0 0 4px #fff;opacity:1}.Button .colorPickerBtn{background:hsla(0,0%,100%,.5);border:none;border-radius:3px;cursor:pointer;padding:2px 3px 1px;text-align:center}.Button .cover{align-items:center;background-color:rgba(0,0,0,.8);bottom:0;display:grid;justify-items:center;left:0;position:fixed;right:0;top:0}.Button .popover{position:absolute;z-index:2}.Button input{background:none;border:none;border-bottom:1px dashed #ccc;color:#fff;font-size:.8em;padding:4px 4px 1px;text-align:center;width:90%}.Button .label{pointer-events:none;-webkit-user-select:none;user-select:none}.Pad{max-width:600px;text-align:center;width:90%}.Pad .grid{grid-gap:10px;aspect-ratio:1/1;display:grid;gap:10px;width:100%}.Keyboard{grid-column:span 2;text-align:center}.Keyboard svg rect{rx:3;cursor:pointer}.Keyboard svg text{text-anchor:middle;font-size:10px;pointer-events:none;-webkit-user-select:none;user-select:none}.Keyboard svg .whiteKey{stroke:#555;fill:#fff;height:150px;width:30px}.Keyboard svg .blackKey{stroke:#979797;fill:#4b4b4b;height:105px;width:18px}.Keyboard svg .blackKeyText{fill:#fff}.Sliders{text-align:center;width:90%}.Sliders .label{height:25px;pointer-events:none;-webkit-user-select:none;user-select:none}.Sliders .editForm{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;pointer-events:all}.Sliders input{background:none;border:none;border-bottom:1px dashed #aaa;color:#eee;font-size:.8em;margin-left:2px;padding:4px 4px 1px;text-align:center;width:50%}.Sliders .rangeInfo{color:#888;font-size:.8em;padding-left:10px;pointer-events:none;-webkit-user-select:none;user-select:none}.Sliders .currentValue{padding-left:30px;padding-right:5px;width:20px}
/*# sourceMappingURL=main.74a65fcd.css.map*/