body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f2f2f2;
}

/* FORCE A 20x20 GRID */
#crossword {
  display: grid;
  grid-template-columns: repeat(20, 40px);
  grid-template-rows: repeat(20, 40px);
  gap: 2px;
  width: max-content;
}

.cell {
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid #000;
  position: relative;
}

.cell.black {
  background: black;
}

.cell input {
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  background: transparent;
}

.correct {
  background-color: #b6f2b6;
}

.incorrect {
  background-color: #f2b6b6;
}