.box{display:flex;flex-direction:column;align-items:center;border-radius:1em;padding:5%}#drum-machine{transition:width .3s;background-color:#eac696;flex-wrap:wrap;justify-content:center;width:100%;height:fit-content}.drum-pad{width:80%;padding:25% 10%;position:relative;transition:color .2s,background-color .2s;background-color:#fff;text-align:center;justify-content:center;font-size:2em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.drum-pad p{margin:0}.pressed{transition:color .2s,background-color .2s;background-color:#65451f;color:#fff}.drum-pad:hover{background-color:#65451f;color:#fff}#grid{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-content:center;gap:10%;padding:5%;width:80%;height:fit-content}#display{transition:all .3s;background-color:#65451f;color:#fff;font-size:2em;padding:0 1em;width:4em;height:fit-content;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:5%}#credits{color:#65451f;font-size:1.2em}@media (min-width: 600px){#drum-machine{width:80vh}}html{scroll-behavior:smooth;width:100%;height:100%;overflow:hidden}body{font-family:fantasy;margin:0;background-color:#65451f;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}#root{width:100%;display:flex;align-items:center;justify-content:center}