body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background:url(https://coolbackgrounds.io/images/backgrounds/index/sea-edge-79ab30e2.png) no-repeat 50% fixed;background-size:100% 100%;color:#fff;font-family:Orbitron,sans-serif;height:100vh}#drum-machine{background-color:rgba(0,0,0,.7);border-radius:15px;box-shadow:0 0 15px 0 hsla(0,0%,100%,.1);margin:auto;padding:30px;width:75%}#display{font-size:30px;letter-spacing:3px;margin-bottom:30px;text-align:center;text-transform:uppercase}.drum-pads{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}.drum-pad{align-items:center;background-color:#222;border:2px solid #ff4dff;border-radius:5px;display:flex;height:100px;justify-content:center;overflow:hidden;position:relative;width:100px}.drum-pad:hover{border-color:#fc36ff}.drum-pad:active{-webkit-transform:scale(.95);transform:scale(.95)}.drum-pad:after{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite;background-image:linear-gradient(180deg,#ff4dff,#f6f,#f9f,#f6f,#ff4dff);content:"";height:100%;left:0;opacity:.5;position:absolute;top:0;width:100%;z-index:-1}.clip{display:none}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}#Q{background-color:#ff4dff}#W{background-color:#f6f}#E{background-color:#f9f}#A{background-color:#f6f}#S{background-color:#ff4dff}#D{background-color:#fc36ff}#Z{background-color:#f6f}#X{background-color:#ff4dff}#C{background-color:#f6f}@media screen and (max-width:768px){#drum-machine{width:90%}}
/*# sourceMappingURL=main.2abe5f2c.css.map*/