html, body {
  background: #000;
  color: #79dde4;
  color-scheme: dark;
  font-family: sans-serif;
}

.puzzle-grid {
  display: grid;
  touch-action: manipulation;  /* suppress doubleclick */
  grid-template-rows: repeat(var(--rows), 50px);
  grid-template-columns: repeat(var(--cols), 50px);
  background: #269a8e;
  border-color: #269a8e;
  gap: 2.5px;
  padding: 2.5px;
}

.example-answer {
    color:transparent;
    transition: color 0.5s ease;
}
.example-answer.wrong {
    text-decoration: line-through;
}
.puzzle-grid:hover .example-answer {
    color: red;
}

.cell {
  position: relative;
  padding: 0;
  background: #000;
  color: #cbf4f7;
  text-align: center;
  cursor: pointer;
  container-type: inline-size;
  container-name: cell;

  -webkit-tap-highlight-color: transparent;  /* buzz off webkit */
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  width: 50px;
  height: 50px;
}

.puzzle-cell-prefilled {
  color: #79dde4;
}


.cell-content {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
  pointer-events: none; /* allow td to receive click */
  font-size: 40px;
}

.pbutton {
  margin: 0px 10px 0px 10px;
  font-size:20px;
  padding: 10px;
  color: #79dde4;
  background-color: #000;
  border-color: #269a8e;
}


nav {
  /*border-bottom: 1px solid black;*/
}

.crumbs ol {
  list-style-type: none;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.crumb {
  display: inline-block;
}
/*
.crumb a::after {
  display: inline-block;
  content: "|";
  font-size: 80%;
  font-weight: bold;
  padding: 3px;
}
*/