body { font-family: sans-serif; } h1 { text-align: center; } div { display: flex; column-gap: 0.5em; margin: 1em auto; justify-content: center; text-align: center; align-items: center; } table { border-spacing: 0; border: 1px solid black; border-radius: 6px; } td, tr { padding: 0; } tr:first-child td:first-child { border-top-left-radius: 5px; } tr:first-child td:first-child input { border-top-left-radius: 4px; } tr:first-child td:last-child { border-top-right-radius: 5px; } tr:first-child td:last-child input { border-top-right-radius: 4px; } tr:last-child td:first-child { border-bottom-left-radius: 5px; } tr:last-child td:first-child > input { border-bottom-left-radius: 4px; } tr:last-child td:last-child { border-bottom-right-radius: 5px; } tr:last-child td:last-child input { border-bottom-right-radius: 4px; } tr:nth-child(3n+1) td { border-top: 1px solid black; } tr:nth-child(3n+2) td { border-top: 1px solid grey; border-bottom: 1px solid grey; } tr:nth-child(3n) td { border-bottom: 1px solid black; } td:nth-child(3n+1) { border-left: 1px solid black; } td:nth-child(3n+2) { border-left: 1px solid grey; border-right: 1px solid grey; } td:nth-child(3n+3) { border-right: 1px solid black; } input { width: 1.6em; height: 1.6em; font-size: 1.5em; border: 0; padding: 0; text-align: center; transition: 0.3s; } input:enabled { color: darkblue; background: white; } input:disabled { color: white; background: #6666ff; } .same-value:enabled { color: #009973; background: #66ffd9; } .forbidden-value:enabled { background: #b3ffda; } .same-value:disabled { color: white; background: #00e6ac; } .forbidden-value:disabled { background: #6288ea; } input::placeholder { color: #888; } .buttons { flex-wrap: wrap; column-gap: 0.2em; margin: 0; } input[type="color"] { font-size: 1em; } a { text-decoration: none; }