.drum-machine-wrapper{--light-grey:hsl(var(--muted));--dark-grey:hsl(var(--background));height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center}.levelWrapper{display:flex;margin-bottom:2vh;margin-top:2vh;width:90%;justify-content:space-around}.level{display:flex;flex-direction:column-reverse;width:10vh;height:25vh;margin:2px;background:var(--dark-grey);border-radius:8px;overflow:hidden}.level.active .bar{flex-grow:1}.level.openhat .bar,.level.openhat .label,.pad.openhat.on:after{background:#E14D54}.level.hihat .bar,.level.hihat .label,.pad.hihat.on:after{background:#FD8855}.level.kick .bar,.level.kick .label,.pad.kick.on:after{background:#FEC952}.level.snare .bar,.level.snare .label,.pad.snare.on:after{background:#97C95A}.level.cowbell .bar,.level.cowbell .label,.pad.cowbell.on:after{background:#1AB16C}.level.crash .bar,.level.crash .label,.pad.crash.on:after{background:#189BC6}.level.hi_tom .bar,.level.hi_tom .label,.pad.hi_tom.on:after{background:#8F639F}.level.low_tom .bar,.level.low_tom .label,.pad.low_tom.on:after{background:#F67B9F}.bar{flex-grow:0;width:100%;transition:all .3s}.label{display:flex;width:100%;height:40%;align-items:flex-end;font-family:rubik,sans-serif}.label div{color:white;width:100%;margin:15%;padding-bottom:5px;font-size:calc(7px + .5vh);text-align:center;border-bottom:3px solid white}.step{display:flex;flex-direction:column;flex:1}.step:nth-child(n+13):nth-child(-n+16) .pad,.step:nth-child(n+5):nth-child(-n+8) .pad{background:var(--dark-grey)}.step.active .pad{filter:brightness(130%)}.drum-pads{display:flex;width:90%;justify-content:space-around}.pad{display:flex;justify-content:center;align-items:center;height:5vh;width:5vh;margin:2px;background:var(--light-grey);border-radius:4px}.pad:hover{cursor:pointer;filter:brightness(130%)}.on{position:relative}.on:after{position:absolute;content:"";height:35%;width:35%;transition:all .2s ease-in-out;border-radius:2px}.active .on:after{height:90%;width:90%}.controls{display:flex;margin-top:2vh;color:#aaa;font-size:calc(14px + .7vh);gap:1rem}.controls .pad{background:transparent}#load:active .fa,#reset:active .fa,#save:active .fa{transform:scale(1.2)}.pulse{animation:pulse 1.2s ease-in infinite}@keyframes pulse{50%{filter:brightness(150%)}to{filter:brightness(100%)}}