body{background-color:#8d8d8d}#drum-machine{width:630px;margin:20vh auto 0;border:5px solid orange;display:flex;justify-content:space-between;flex-wrap:wrap;background-color:#b3b3b3;border-radius:10px}#buttons{width:300px;height:200px;border:1px solid #000;border-radius:10px;display:grid;grid-template-columns:33% 33% 33%;padding:10px}.drum-pad{background-color:grey;border-radius:10px;color:#000;margin:5px}#controls{border:1px solid #000;border-radius:10px;width:300px;display:flex;flex-direction:column;justify-content:space-around;align-items:center}#display{width:150px;height:20px;background:grey;border:1px solid grey;text-align:center;margin-top:10%}@media (max-width:650px){#drum-machine{width:300px}}.click-animation{-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes blink{0%{background-color:grey}50%{background-color:orange}to{background-color:grey}}@keyframes blink{0%{background-color:grey}50%{background-color:orange}to{background-color:grey}}.switch{position:relative;display:inline-block;width:60px;height:34px}.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:26px;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{-webkit-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}
/*# sourceMappingURL=main.cab589b6.chunk.css.map */