html,body{margin:0;width:100vw;height:100vh}h1{font-family:sans-serif;font-size:14px;text-transform:uppercase}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}#app .grid{display:grid;max-width:520px;max-height:520px;width:100%;aspect-ratio:1 / 1;background:#a9a9a9;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;column-gap:.5em;row-gap:.5em;padding:10px}.grid button{display:inline-block;background:#d3d3d3;border:1px solid gray;border-radius:1em;cursor:pointer;transition:all .2 s ease-out;box-shadow:0 0 4px #0003}.grid button:hover{background:#fff}.grid button.on{background:#ff1493}.controls{margin:15px 0;text-align:center;display:flex;gap:15px;width:100%;justify-content:center}.controls button{font-size:14px;text-transform:uppercase;padding:.5em 1em;background:linear-gradient(#ff0,orange);border-radius:1em;border:1px solid orange;box-shadow:0 0 5px 5px #0000001a;cursor:pointer}@media screen and (max-width:520px){.controls{flex-direction:column}.controls button{display:block;border-radius:0}}