@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap";input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;font-size:18px;padding:2px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:20px;cursor:pointer;outline:none;overflow:hidden;border-radius:16px}input[type=range]::-webkit-slider-runnable-track{height:20px;background:#4645458f}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:20px;width:20px;border:2px solid #fefef6ac;border-radius:50%;box-shadow:-350px 0 0 340px var(--bg-color);background:linear-gradient(0deg,#2c3e50,#9b9b9b)}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;display:grid;place-content:center;font-size:inherit;background-color:#9c9c98;outline:none;width:2.5em;height:4.5em;border:.1em solid var(--main-color)}input[type=checkbox]:before{content:"";background-color:var(--main-color);width:2em;height:3.5em;transform:scale(0);transition:.12s transform ease}input[type=checkbox]:checked:before{transform:scale(1);background-color:var(--bg-color)}:root{--main-color: #404041;--bg-color: #f6ede3;--border-color: #e1e1e1}*{margin:0;padding:0;box-sizing:border-box}body{display:flex;align-items:center;justify-content:center;height:100vh;background-color:var(--bg-color);background-repeat:no-repeat;background-size:cover;font-family:Caveat,sans-serif}.steps{display:flex}.steps>*:nth-child(4n):not(:last-child){margin-right:10px}button{border:none}.drum{display:flex;background-color:var(--main-color);padding:20px;gap:20px}.drum-left{display:flex;flex-direction:column;justify-content:space-around}.volume{display:flex;align-items:center;gap:10px}button{border:none;background-color:transparent;border-radius:50%;cursor:pointer;outline:none}.top{display:flex;gap:2.5rem;align-items:center;background-color:var(--main-color);padding:30px;border-bottom:1px solid #000}.controller{gap:10px;display:flex;align-items:center;justify-content:center}.btn{background:linear-gradient(0deg,#2c3e50,#9b9b9b);box-shadow:inset 0 1px 1px #696969,0 5px 5px #040404;padding:8px;position:relative;color:#eee;display:flex}.btn-pressed{background:linear-gradient(0deg,#2c3e50,#9b9b9b);box-shadow:inset 0 0 #000,inset 0 0 3px 1px #000}.icon{color:#fff;margin-top:8px;font-size:25px}