body {
    transform: scale(1);
    transform-origin: top left;
    width: 100%; /* voorkomt dat de pagina buiten beeld valt */
}

.button-container {
  display: flex;
  gap: 5px; /* Ruimte tussen de knoppen */
}
.button-container button {
  padding: 10px;
  border: 1px solid #000;
  background-color: #f0f0f0;
  cursor: pointer;
}

#sudoku-container {
  display: grid;
  grid-template-columns: repeat(21, 40px);
  grid-template-rows: repeat(21, 40px);
  touch-action: none; /* Belangrijk voor pinch-zoom */
  position: relative; /* of default */
  transform-origin: center center;
  /* z-index: -1; */
}

.sudoku-blokje {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
}

.pencil-marks3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  color: white;
}

.pencil-marks4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  height: 100%;
  color: white;
}

.pencil-mark3 {
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pencil-mark4 {
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

label, input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}