.hidden {
  opacity: 0;
}

table .cell {
  border: solid black 1px;
  width: 2em;
  height: 2em;
}

table .ghost {
  width: 2em;
  height: 2em;
}

table td, table .comparison {
  text-align: center;
}


table .comparison.above {
  transform: rotate(90deg);
}

table .comparison.left {
  /* the '<' chararacter is already heading to the correct direction */
}

table .comparison.right {
  transform: rotate(-180deg);
}

table .comparison.below {
  transform: rotate(-90deg);
}

input[type="number"] {
  width: 2.5em;
}

.keyboard {
  position: absolute;
  z-index: 10;
}

.keyboard table td {
  width: 2em;
  height: 2em;

  border: 1px solid grey;
  background-color: white;
}


#confetti-canvas {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#board {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}