:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}body{background-color:#f5e3e0}*{margin:0;padding:0}#drum-machine{display:grid;grid-template-areas:"drum-pads header" "drum-pads display";justify-content:center;align-items:center;height:100vh;width:100vw;gap:1.5rem}@media (max-width: 1080px){#drum-machine{grid-template-areas:"header" "display" "drum-pads";min-height:100vh;justify-content:center;margin:auto;padding:10px;gap:0}}#header{grid-area:header;align-self:flex-end;font-size:2rem;color:#6e4555;font-weight:700;text-transform:lowercase}#header-reg{font-weight:lighter}#display{grid-area:display;align-self:start;border:1px solid transparent;border-radius:4px;width:300px;font-size:1.2em;padding:20px;background-color:#6e4555;color:#f5e3e0;text-transform:lowercase}#drum-pads{grid-area:drum-pads;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-content:center;align-items:center;margin:auto}button{width:200px;height:200px;margin:3px;background-color:#e8b4bc;border:1px solid #6E4555;border-radius:4px;box-shadow:#6e4555 2px 2px 2px;color:#6e4555;font-size:3rem;font-weight:700}