:root {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root, body {
  overscroll-behavior: none;
}
body {
  width:max-content;
  margin: 0px;
}
h2 {
  margin: 0px auto;
  padding: 0px 4px;
  width: max-content;
  border:darkturquoise solid 5px;
  color: rgb(145, 0, 0);
}

label {
  user-select: none;
}
div {
  vertical-align: middle;
  box-sizing: border-box;
}
p {
  margin: .75ex 0px;
}
div.main {
  font-size: 20pt;
  font-weight: bold;
  text-align: center;
}
div.sudoku {
  margin: auto;
  border: solid 3px;
  display: grid;
  cursor: cell;
  border-color: grey;
}
div.solved div.sudoku {
  border-color: darkturquoise;
}
div.sudoku > div {
  border: 1px solid;
  border-color: grey;
  user-select: none;
}
div.solved  div.sudoku > div {
  border-color: darkturquoise;
}
div.sudoku > div.lb { border-left-width: 3px; }
div.sudoku > div.rb { border-right-width: 3px; }
div.sudoku > div.tb { border-top-width: 3px; }
div.sudoku > div.bb { border-bottom-width: 3px; }
.greenblock {
  background-color: rgb(227, 255, 184);
}
div.solved .greenblock {
  background-color: rgb(255, 232, 103);
}
body>div:not(.solved) div.sudoku div.selected {
  background-color: rgb(211, 244, 255);
}

div.sudoku > div:not(.grid) {
  display:flex; align-items: center; justify-content:center;
  padding-bottom: 4px
}
div.sudoku > div.grid > div {
  font-size: 45%;
  height: 1fr ;width: 1fr;
  line-height: 1.15em;
  overflow: visible;
}

div.digitRow {
  margin: .75ex auto; display: flex; gap: 3px;
  width: min-content;
  user-select: none;
}
div.digitRow > div {
  width: 48px; height: 48px;
  border: solid 1px black;
  border-radius: 12px;
  display: flex; align-items: center; justify-content:center;
  padding-bottom: 4px
}
div.complete {
  background-color: lightgray;
}
button, input[type=submit] {
  font-size: 120%;
  padding: .4ex .8ex;
}
*.blue  {color: rgb(0, 114, 114)}
div.deduced  {color:cyan}
div.tent   {color:coral}
div.orange {color: orange}
div.green {color: rgb(0, 175, 0)}
div.transp {color: rgb(209, 209, 209)}