body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,'Courier New',monospace}.App{text-align:center;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif}body{background-color:#a8a8a8}.drum-machine{margin:25vh auto;width:560px;height:365px;display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"pads pads pads title" "pads pads pads kat" "pads pads pads display";border:5px #574730 solid;background-color:#b8a66c;border-radius:10px}.kat>img{border-radius:50%;max-width:120px;justify-content:center;align-items:flex-end}.padwrapper{grid-area:pads;display:grid;grid-template-columns:repeat(3,1fr)}.title{grid-area:title;margin:10px;font-size:xx-large;font-variant:small-caps;font-weight:bolder;display:grid;align-items:flex-end;justify-content:center}.display{grid-area:display;display:flex;justify-content:center;align-items:center;background-color:#1a1919;width:180px;height:40px;margin:10px;color:#11e611;border-radius:10px}.drum-pad{display:flex;justify-content:left;align-items:flex-end;background-color:#5a5353;border-radius:10px;height:80px;width:80px;margin:10px;padding:10px;box-shadow:4px 4px 4px #000;text-shadow:.75px .75px #9e9191,-.75px -.75px #444;color:#221f1f}.playing{background-color:orange;transform:translate(1px,1px);box-shadow:inset 0 0 25px 30px #5a5353,3px 3px 3px #000;transition:all cubic-bezier(.075,.82,.165,1) .2s}