@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --candidate-color: #f06868;
  --second-color: #fab57a;
  --third-color: #edf798;
  --candidate-hover-color: #80d6ff;
  --candidate-eliminated-color: #80d6ff;
  --border-color: #42240c;
  --value-color: #c81912;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--border-color);
}
.button-solve {
  background-color: var(--value-color);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
}
.button-solve:active {
  transform: scale(0.98);
}

.grid-box {
  display: grid;
  grid-template-columns: auto auto auto;
  border: 1px solid var(--border-color);
}

.grid-box:first-child {
  border-left: 2px solid var(--border-color);
  border-top: 2px solid var(--border-color);
}
.grid-box:nth-child(2) {
  border-top: 2px solid var(--border-color);
}
.grid-box:nth-child(3) {
  border-right: 2px solid var(--border-color);
  border-top: 2px solid var(--border-color);
}
.grid-box:nth-child(4) {
  border-left: 2px solid var(--border-color);
}
.grid-box:nth-child(6) {
  border-right: 2px solid var(--border-color);
}
.grid-box:nth-child(7) {
  border-left: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}
.grid-box:nth-child(8) {
  border-bottom: 2px solid var(--border-color);
}
.grid-box:nth-child(9) {
  border-right: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}

.grid-selector {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-sodoku {
  display: grid;
  grid-template-columns: auto auto auto;
}

.candidate {
  text-align: center;
  color: var(--candidate-color);
}

.candidate:hover {
  background-color: var(--candidate-hover-color);
}

.candidate.exclude {
  color: var(--candidate-eliminated-color);
  opacity: 20%;
}

.candidate.exclude:hover {
  color: var(--candidate-color);
  background-color: var(--candidate-hover-color);
  opacity: 100%;
}

.hidden {
  display: none;
}

.show-value {
  grid-template-columns: auto;
  color: var(--value-color);
  font-size: 50px;
  transition: transform 2s;
  transition-timing-function: ease-in-out;
}

.show-value.init {
  transform: rotate(1080deg);
  background-color: var(--third-color);
}

.show-value.new {
  transform: rotate(1080deg);
}

.grid-cell {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(197, 176, 176, 0.8);
  display: grid;
  cursor: context-menu;
}

.grid-cell.newValue {
  background-color: var(--second-color);
}

.grid-cell.newValue {
  transform: scale(1.5);
}

.grid-cell.updating {
  background-color: var(--candidate-eliminated-color);
}