@import"https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap";*{margin:0}html{box-sizing:border-box;font-size:62.5%}body{background-color:#000}#root{height:99vh;width:99vw;display:flex;align-items:center;justify-content:center;background-color:#000}#root #drum-machine{border:3px solid rgb(0,0,0);width:min(650px,95vw);height:min(300px,90vh);display:flex;flex-direction:row}#root #drum-machine .drum-pad-container{width:60%;display:flex;align-items:center;justify-content:center}#root #drum-machine .drum-pad-container .pad-wrapper{width:85%;height:85%;display:flex;flex-wrap:wrap;justify-content:center;padding:5px}#root #drum-machine .drum-pad-container .pad-wrapper .drum-pad{width:min(8.5rem,10vw);height:min(6.5rem,10vw);margin-right:10px;border-radius:10px;outline:none;font-size:min(3rem,3vw);font-family:Rajdhani,sans-serif;font-weight:500;box-shadow:2px 2px 2px #7fb3ee;cursor:pointer;background-color:#1f5394;color:#f8f8ff}#root #drum-machine .controls-container{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}#display{border:1px solid rgb(26,71,204);background-color:#2196f3;width:15rem;height:5rem;color:#f8f8ff;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:500;font-family:Rajdhani,sans-serif;box-shadow:2px 2px 1px #7fb3ee}input[type=range]+p{display:flex;align-items:center;justify-content:center;width:7rem;height:2rem;font-size:1.6rem;font-family:Rajdhani,sans-serif;font-weight:500;color:#f8f8ff}input[type=range]{cursor:pointer;-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{background-color:#2196f3;height:7px;box-shadow:1px 2px 1px #7fb3ee}input[type=range]::-webkit-slider-thumb{height:25px;width:10px;margin-top:-9.5px;background-color:#e01e1e;box-shadow:1.5px 1.5px 1px #dd6969;-webkit-appearance:none}.power-div{border:1px solid;position:relative;display:inline-block;width:60px;height:34px;box-shadow:1px 1px .7px #7fb3ee}.power-div input{opacity:0;width:0;height:0;outline:none}.power-div .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#312f2f;transition:.2s ease}.power-div .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#ccc;transition:.2s ease}.power-div input:checked+.slider{background-color:#2196f3}.power-div input:checked+.slider:before{transform:translate(26px)}@media screen and (max-width: 650px){#drum-machine{transform:rotate(90deg)}}@media screen and (max-width: 450px){#drum-machine{transform:rotate(90deg);scale:1.4}.controls-container{transform:scale(.7)}}@media screen and (max-width: 350px){#drum-machine{transform:rotate(90deg);scale:1.1}}