* {
  --gridLine-soft: #ddd;
  --gridLine-hard: black;
}

body {
  padding: 50px;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 1em 0 !important;
}

.sudoku-board {
  margin: 20px 0;
}

.sudoku-board .cell {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--gridLine-soft);
  box-sizing: border-box;
  width: calc(100% / var(--items));
  padding-bottom: calc(100% / var(--items));
  position: relative;
}

.cell .cell-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell-inner input[type="text"] {
  width: 1em;
  height: 1em;
  outline: none;
  border: none;
}

.sudoku-board .cell-4x4 {
  --items: 4;
  --sqrt-items: 2;
}

.sudoku-board .cell-9x9 {
  --items: 9;
  --sqrt-items: 3;
}

.sudoku-board .cell-16x16 {
  --items: 16;
  --sqrt-items: 4;
}

.sudoku-board .cell-25x25 {
  --items: 25;
  --sqrt-items: 5;
}

.sudoku-board .cell-36x36 {
  --items: 36;
  --sqrt-items: 6;
}

.sudoku-board {
  width: 500px;
}

.sudoku-board .cell-4x4:nth-child(2n) {
  border-right-color: var(--gridLine-hard);
}

.sudoku-board .cell-4x4:nth-child(4n) {
  border-right-color: var(--gridLine-soft);
}

.sudoku-board .row-4x4:nth-child(2n) .cell {
  border-bottom-color: var(--gridLine-hard);
}

.sudoku-board .row-4x4:nth-child(4n) .cell {
  border-bottom-color: var(--gridLine-soft);
}

.sudoku-board .cell-9x9:nth-child(3n) {
  border-right-color: var(--gridLine-hard);
}

.sudoku-board .cell-9x9:nth-child(9n) {
  border-right-color: var(--gridLine-soft);
}

.sudoku-board .row-9x9:nth-child(3n) .cell {
  border-bottom-color: var(--gridLine-hard);
}

.sudoku-board .row-9x9:nth-child(9n) .cell {
  border-bottom-color: var(--gridLine-soft);
}

.sudoku-board .cell-16x16:nth-child(4n) {
  border-right-color: var(--gridLine-hard);
}

.sudoku-board .cell-16x16:nth-child(16n) {
  border-right-color: var(--gridLine-soft);
}

.sudoku-board .row-16x16:nth-child(4n) .cell {
  border-bottom-color: var(--gridLine-hard);
}

.sudoku-board .row-16x16:nth-child(16n) .cell {
  border-bottom-color: var(--gridLine-soft);
}

.sudoku-board .cell-25x25:nth-child(5n) {
  border-right-color: var(--gridLine-hard);
}

.sudoku-board .cell-25x25:nth-child(25n) {
  border-right-color: var(--gridLine-soft);
}

.sudoku-board .row-25x25:nth-child(5n) .cell {
  border-bottom-color: var(--gridLine-hard);
}

.sudoku-board .row-25x25:nth-child(25n) .cell {
  border-bottom-color: var(--gridLine-soft);
}

.sudoku-board .cell-36x36:nth-child(6n) {
  border-right-color: var(--gridLine-hard);
}

.sudoku-board .cell-36x36:nth-child(36n) {
  border-right-color: var(--gridLine-soft);
}

.sudoku-board .row-36x36:nth-child(6n) .cell {
  border-bottom-color: var(--gridLine-hard);
}

.sudoku-board .row-36x36:nth-child(36n) .cell {
  border-bottom-color: var(--gridLine-soft);
}