*{font-family:Roboto,sans-serif;margin:0}body{background-image:url(/static/media/drms.7b99c891425932cf4cde.jpg);font-size:24px}h2{font-size:30px}#drum-machine{align-items:center;display:flex;flex-direction:column;height:20.5vh;justify-content:center;margin:15px}.wrapper{grid-gap:15px;background-image:linear-gradient(180deg,#d5d7e5,#eee,#d2ccc4,#d5d7e5,#838996);border-radius:15px;display:grid;grid-template-columns:1fr;margin-top:40px;padding:10px;width:100%}.keyboard{grid-gap:10px;display:grid;grid-template-columns:repeat(3,1fr)}.keyboard .drum-pad{background-color:#c2c8c5;border-radius:10px;cursor:pointer;font-size:24px;height:80px;outline:none;transition:all .3s ease-in-out;width:100%}@media(min-width:768px){.wrapper{width:680px}}@media(min-width:992px){.wrapper{grid-template-columns:1fr 1fr}}.control{align-items:center;display:flex;flex-direction:column;justify-content:center}.control>button,.control>h2,.control>input{margin-bottom:10px}.control button{background-color:#041b2d;border:none;border-radius:5px;color:red;cursor:pointer;font-size:20px;padding:8px 10px}.App{text-align:center}.App-header{align-items:center;background-image:url(/static/media/drms2.e5695d1ef5ae74cc2581.jpg);color:#0b0742;display:block;flex-direction:column;font-family:Roboto,sans-serif;font-size:calc(10px + 2vmin);font-weight:700;justify-content:center;min-height:35vh}.project{margin:0;padding-top:70px}.App-logo{align-items:flex-end;border-radius:50%;height:3vmin;justify-content:space-between;margin-top:10px;padding:0 2px 5px;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-link{color:#fff;font-family:Roboto,sans-serif;font-weight:700;text-decoration:none}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.logo{justify-content:space-between;position:absolute;right:15px;top:5px}.inner-logo{display:inline-block;font-size:25px;font-style:italic;font-weight:700}
/*# sourceMappingURL=main.a80271a6.css.map*/