*{box-sizing:border-box;margin:0;padding:0}:root{--drum-machine-width:800px;--primary-color:#29424d;--slider-thumb-color:#3c82a1}::selection{background-color:#29424d;background-color:var(--primary-color);color:#fff}#root{height:100vh;justify-content:center;width:100vw}#drum-machine,#root{align-items:center;display:flex}#drum-machine{border:3px solid #29424d;border:3px solid var(--primary-color);flex-direction:column;gap:20px;justify-content:flex-start;padding:0 20px 20px;width:800px;width:var(--drum-machine-width)}#drum-machine h1{color:#29424d;color:var(--primary-color);padding:8px}div#machine-wrapper{align-items:center;display:flex;justify-content:space-around}section#pad{align-items:center;border-right:1px solid #29424d;border-right:1px solid var(--primary-color);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 8px;width:400px;width:calc(var(--drum-machine-width)/2)}section#pad button{background-color:#29424d;background-color:var(--primary-color);border:2px solid #29424d;border:2px solid var(--primary-color);border-radius:4px;color:#fff;cursor:pointer;font-size:20px;font-weight:700;height:80px;height:calc(var(--drum-machine-width)/10);width:25%}section#pad button:hover{box-shadow:0 0 4px 4px #29424d;box-shadow:0 0 4px 4px var(--primary-color);text-shadow:0 0 5px #fff}section#control-box{align-items:center;display:flex;flex-direction:column;font-size:20px;height:256px;justify-content:space-around;position:relative;width:400px;width:calc(var(--drum-machine-width)/2)}section#control-box #power-box{align-items:center;color:#29424d;color:var(--primary-color);display:flex;gap:32px;justify-content:center;width:50%}section#control-box #display{align-content:center;background-color:#343637;border-radius:4px;color:#fff;font-size:16px;font-weight:700;height:48px;text-align:center;text-shadow:0 0 10px #fff;width:50%}section#control-box #display.off{background-color:#6b0202;color:#fff;text-shadow:0 0 10px #fff}input[type=checkbox]{-webkit-appearance:none;background:linear-gradient(0deg,#333,#000);border-radius:20px;box-shadow:0 0 0 4px #353535,0 0 0 5px #3e3e3e,inset 0 0 10px #000,0 5px 20px #00000080,inset 0 0 15px #0003;height:20px;outline:none;position:relative;width:60px}input:checked[type=checkbox]{background:linear-gradient(0deg,#6dd1ff,#20b7ff);box-shadow:0 0 2px #6dd1ff,0 0 0 4px #353535,0 0 0 5px #3e3e3e,inset 0 0 10px #000,0 5px 20px #00000080,inset 0 0 15px #0003}input[type=checkbox]:before{background:linear-gradient(0deg,#000,#6b6b6b);border-radius:20px;box-shadow:0 0 0 1px #232323;content:"";height:18px;left:1px;position:absolute;top:1px;transition:.5s;width:30px}input:checked[type=checkbox]:before{left:29px}input[type=checkbox]:after{background:linear-gradient(0deg,#6b0202,#000);border-radius:50%;content:"";height:4px;left:22px;position:absolute;top:calc(50% - 2px);transition:.5s;width:4px}input:checked[type=checkbox]:after{background:#63cdff;box-shadow:0 0 5px #13b3ff,0 0 15px #13b3ff;left:51px}#volume-control{align-items:center;background-color:#343637;border-radius:4px;display:flex;height:1.5rem;justify-content:center;position:relative;width:13rem}#volume-control:after,#volume-control:before{color:#fff;display:block;height:100%;padding:0 1rem;pointer-events:none;position:absolute;z-index:99}#volume-control:before{content:"+";right:0}#volume-control:after{content:"-";left:0}#volume-range{-webkit-appearance:none;background-color:#343637;border-radius:4px;cursor:col-resize;height:1.5rem;overflow:hidden;width:13rem}#volume-range[step]{background-color:initial}#volume-range::-webkit-slider-thumb{-webkit-appearance:none;box-shadow:-20rem 0 0 20rem #3c82a1;box-shadow:-20rem 0 0 20rem var(--slider-thumb-color);width:0}#volume-range::-moz-range-thumb{border:none;box-shadow:-20rem 0 0 20rem #3c82a1;box-shadow:-20rem 0 0 20rem var(--slider-thumb-color);width:0}p#powered-by{bottom:-12px;color:#29424d;color:var(--primary-color);font-size:12px;font-weight:700;position:absolute;right:12px;text-align:right;width:100%}p#powered-by a{color:#43b5ea;text-decoration:none}p#powered-by a:hover{color:#3c82a1;color:var(--slider-thumb-color)}
/*# sourceMappingURL=main.d07e2f12.css.map*/