#drum-machine{justify-content:center;height:100vh;background:#807f7f}#display,#drum-machine{display:flex;flex-direction:column;align-items:center}#display{justify-content:space-evenly;background:#c0bfbf;width:600px;height:auto;padding:30px;border-radius:7px;border:4px solid #29a761}.content{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;width:100%;height:250px}.btnStyle{border:0;margin:5px;padding:10px;border-radius:5px;color:#1d1d1d;font-weight:700;background:#7a7979;cursor:pointer;width:75px;height:75px;box-shadow:4px 3px 0 0}.btnStyleActive{background:#ffd64d}label,p{font-weight:700}.positionFlx{display:flex;flex-direction:column;align-items:center;width:100%}.gapPos{gap:15px}.txtDisplay{height:45px;width:150px;background:#7a7979;display:flex}.txtDisplay p{margin:auto}.disabled-off{position:absolute;width:100%;padding-left:200px;color:#0075ff}.disabled-on{z-index:-10000;position:absolute}.switch{position:relative;display:inline-block;width:60px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:16px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translateX(26px)}