@import url(https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&family=Righteous&display=swap);body{background-color:#111}.beat{display:inline-block;height:45px;margin:5px;width:45px}.track{background-color:#202020;border-bottom:1px solid #111;border-radius:10px;color:#fff;font-family:Fira Sans,sans-serif;margin:auto;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}#track-list{list-style-type:none;padding:0}#drum-machine{background-color:#222;font-family:Righteous,cursive;margin:50px auto;padding-bottom:20px;text-align:center;width:1280px}#controls-container,#drum-machine{border-radius:10px;box-shadow:0 0 0 4px #000,0 0 0 8px #353535,0 0 0 12px #000}#controls-container{align-items:center;background-color:#0f0f0f;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin:30px auto;padding:12px 16px;width:88%}.controls-group{align-items:center;display:flex;gap:10px}.controls-group+.controls-group{border-left:1px solid #353535;padding-left:14px}.controls-group--end{margin-left:auto}.controls-label{color:#fff;font-family:Fira Sans,sans-serif;font-size:14px;opacity:.85}#controls-container input,#controls-container select{border-radius:6px;padding:6px 8px}#controls-container button{align-items:center;display:inline-flex;gap:8px}.capitalize{text-transform:capitalize}.instrument-icon{width:50px}.track-title{margin:0;padding:0;white-space:nowrap}.title-subtext{font-size:14px;font-weight:lighter}.title-maintext{font-size:22px;font-weight:bolder}.effect-maintext{font-size:20px;font-weight:400}.track-controls{background-image:linear-gradient(90deg,rgba(0,0,0,.4) 60%,transparent);padding:0 0 0 10px;width:13%}.track-beats,.track-controls{display:inline-block;margin:0;text-align:left}.track-beats{padding:0;width:79%}.track-control-section{margin:10px 0}.track-drag{display:inline-block;margin-top:80px;vertical-align:top;width:1%}.track-drag svg{width:11.5px!important}.track-drag svg:hover{cursor:move}.track-icon{display:inline-block;-webkit-filter:invert(1);filter:invert(1);margin-top:60px;vertical-align:top;width:6%}.machine-header{align-items:center;display:flex;padding:10px}.woofer{border:3px solid #000;max-width:250px}.woofer-container{flex:1 1}.machine-title{color:red;flex:1 1;font-size:50px;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff}.woofer-animated{-webkit-animation:shake .25s;animation:shake .25s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px) rotate(1deg);transform:translate(-3px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}to{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px) rotate(1deg);transform:translate(-3px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}to{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}#start-label{color:#fff;font-size:24px;font-weight:100;margin:auto;padding:20px;width:600px}#effects-container,#track-container{background-color:#0f0f0f;border-radius:10px;box-shadow:0 0 0 4px #000,0 0 0 8px #353535,0 0 0 12px #000;margin:30px auto;width:90%}#effects-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}.track-kick{background-color:#200000}.track-snare{background-color:#002000}.track-tom{background-color:#000020}.track-hihat{background-color:#200020}.track-crash,.track-hihat{background-color:#002020}.track-clap{background-color:#202000}.track-fx{background-color:#200040}.track-accessory{background-color:#202040}.effect{background-color:#181818;border:1px solid #fff;border-radius:10px;color:#fff;width:24.8%}.effect-controls{display:flex;justify-content:space-evenly}.effect-controls label{font-size:16px;font-weight:lighter}.effect-label{background-color:#000;color:#fff;font-family:Fira Sans,sans-serif;font-weight:700;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:25px}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.ba5fc797.css.map*/