:root{--header-background: #5661b3;--header-text-color: #fff9c2;--header-font-size: 2rem;--square-font-size: calc(8 * var(--header-font-size));--square-text-color: #5661b3;--square-background-color: #e6e8ff;--square-border: 3px solid var(--square-text-color);font:16px/1 sans-serif}html{height:100%}body{margin:0;min-height:100%}h1{text-align:center;font-family:Verdana,Geneva,Tahoma,sans-serif;letter-spacing:.4rem;font-size:var(--header-font-size);color:var(--header-text-color);margin:0;padding:var(--header-font-size);background-color:var(--header-background)}ul,li{margin:0;padding:0;list-style:none}ul{height:calc(100vh - 3 * var(--header-font-size));display:grid;grid-template:1fr 1fr 1fr/1fr 1fr 1fr;gap:1rem;background-color:var(--square-text-color)}ul li{font-family:monospace;font-size:var(--square-font-size);background-color:var(--square-background-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:1s font-size ease-in-out}ul li.taken{cursor:not-allowed}ul li.small{font-size:4rem}ul li.not-allowed-click{background-color:red}