:root{--border-radius:1rem;--white:#e4e4e4;--black:#333}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}@media only screen and (max-width:75em){html{font-size:50%}}@media only screen and (min-width:112.5em){html{font-size:75%}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.svg{pointer-events:none}.sequencer{width:100%;margin-top:22vh;margin-bottom:10vh;display:flex;flex-direction:column;align-items:center}@media only screen and (max-width:75em){.sequencer{margin-top:25vh;padding:0 6rem}}@media only screen and (max-width:56.25em){.sequencer{margin-top:16vh;padding:0 10rem}}.sequencer .track{display:flex}@media only screen and (max-width:56.25em){.sequencer .track{flex-wrap:wrap}}.sequencer .track:not(:first-child){margin-top:5rem}.sequencer .track .controls{display:flex;width:33rem;justify-content:space-between;align-items:center}@media only screen and (max-width:56.25em){.sequencer .track .controls{justify-content:flex-start;flex-grow:1;margin-bottom:4rem}}.sequencer .track .controls h2{font-size:3rem;width:8rem}@media only screen and (max-width:56.25em){.sequencer .track .controls h2{font-size:3.5rem;width:12rem}}@media only screen and (max-width:37.5em){.sequencer .track .controls h2{font-size:2.5rem;width:9rem}}.sequencer .track .controls .mute{padding:1rem 1rem .8rem;border:1px solid;cursor:pointer;background-color:var(--black);outline:none;border-radius:var(--border-radius);transition:all .3s}@media only screen and (max-width:56.25em){.sequencer .track .controls .mute{margin-right:3rem}}.sequencer .track .controls .mute .svg{height:2rem;width:2.5rem;fill:var(--white)}.sequencer .track .controls .active{border:1px solid var(--black);background-color:var(--white)}.sequencer .track .controls .active .svg{fill:var(--black)}.sequencer .track .controls .select{padding:1rem;font-size:1.5rem;border-radius:var(--border-radius);outline:none;width:15rem}.sequencer .track .pads{margin-left:2rem;display:flex;flex-grow:1}@media only screen and (max-width:56.25em){.sequencer .track .pads{margin-left:0;justify-content:space-between}}.sequencer .track .pads .pad{height:8rem;width:8rem;border-radius:var(--border-radius);cursor:pointer}.sequencer .track .pads .pad:not(:last-child){margin-right:1rem}@media only screen and (max-width:56.25em){.sequencer .track .pads .pad{height:7.7rem;width:7.7rem}}@media only screen and (max-width:37.5em){.sequencer .track .pads .pad{height:5.5rem;width:4.5rem}}.sequencer .track .pads .kick-pad{background-color:#a1c5e2}.sequencer .track .pads .kick-pad.active{background-color:#3a95d6}.sequencer .track .pads .snare-pad{background-color:#c8a1e2}.sequencer .track .pads .snare-pad.active{background-color:#9138d4}.sequencer .track .pads .hihat-pad{background-color:#a1e2ba}.sequencer .track .pads .hihat-pad.active{background-color:#34d36e}.sequencer .play{margin-top:6rem;padding:1rem 2.5rem;font-size:2rem;border:none;border-radius:var(--border-radius);cursor:pointer;outline:none;background-color:var(--black);color:var(--white)}.sequencer .tempo{margin-top:5rem}.sequencer .tempo .tempo-slider{margin-bottom:1rem;padding:.3rem;appearance:none;outline:none;cursor:pointer;border-radius:var(--border-radius);background-color:var(--black);width:40rem;display:block}.sequencer .tempo .tempo-slider::-webkit-slider-thumb{appearance:none;border-radius:var(--border-radius);width:2.8rem;height:2.8rem;background:var(--white)}.sequencer .tempo .tempo-label{font-size:2rem}@keyframes playSound{0%{transform:scale(1)}to{transform:scale(1.2)}}
/*# sourceMappingURL=/beat-maker/main.0fb79270.css.map */