@import"https://fonts.googleapis.com/css2?family=Delius&display=swap";body{--black: black;--white: white;--red: #f00;--green: #0f0;background:var(--white);color:var(--black);font-family:"Delius",cursive;font-weight:400;font-style:normal;height:100vh;display:grid;grid-template-columns:repeat(2, auto);grid-template-rows:1fr;align-items:center;justify-items:center}body #controls{display:flex;flex-direction:column;align-items:flex-start;border-top:1px dotted var(--black)}body #controls .controls-section{width:100%;border-bottom:1px dotted var(--black);padding-top:4px}body #controls .controls-section .subdivisions-controls{display:flex;align-items:center;justify-content:space-evenly;padding:2px}body #controls .controls-section .subdivisions-controls button{padding:0px 4px;border-radius:8px}body #controls .controls-section .subdivisions-controls button:hover{background:var(--green)}body #controls .controls-section .subdivisions-controls button.disabled{background:var(--red)}body #controls .controls-section table td{width:32px;height:32px;text-align:center;vertical-align:middle;border-radius:8px}body #controls .controls-section table td.possible{color:var(--black)}body #controls .controls-section table td:hover{background:var(--green)}body #controls .controls-section table td.impossible{background:var(--red)}body #controls .controls-section table td.selected{background:var(--green)}@media(max-width: 720px){body{display:flex;flex-direction:column-reverse;justify-content:space-around}}