body {
  font-family: "0xProto", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#container {
  display: flex;
  flex-direction: column;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: calc(max(30vw, 600px));
}

button {
  font-family: "0xProto", monospace;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  border-radius: 2px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #efefef;
}

button:active {
  background-color: #666;
  color: white;
}

#board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

  outline: 2px solid black;
  border-radius: 2px;
  aspect-ratio: 1;
  width: 100%;
}

#board .group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: none;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  aspect-ratio: 1;
  width: 100%;
  box-sizing: border-box;
}

#board .group:nth-child(3n) {
  border-right: none;
}

#board .group:nth-child(n + 7) {
  border-bottom: none;
}

#board .group .cell {
  appearance: textfield;
  -moz-appearance: textfield;
  border: none;
  border-right: 1px solid lightslategray;
  border-bottom: 1px solid lightslategray;
  height: 100%;
  width: 100%;
  outline: none;
  text-align: center;
  font-size: 2rem;
  caret-color: transparent;
  -webkit-focus-ring-color: transparent;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

#board .group .cell:nth-child(3n) {
  border-right: none;
}

#board .group .cell:nth-child(n + 7) {
  border-bottom: none;
}
#board .group .cell.empty {
  color: transparent;
}
#board .group .cell:focus:not(:read-only) {
  background-color: #efefef;
  animation: blink 1.5s infinite;
}
#board .group .cell.error {
  background-color: #efa0a0;
}
#board .group .cell:read-only {
  cursor: default;
  color: white;
  background-color: #666;
  pointer-events: none;
}
#board .group .cell:read-only:focus {
  background-color: #888;
}

@keyframes blink {
  0%,
  49.99% {
    text-decoration: underline black;
  }

  50%,
  100% {
    text-decoration: none;
  }
}