h1 {
  text-align: center;
}

.fieldWrapper {
  box-sizing: border-box;
  margin: 0 30px;
}

.field {
  aspect-ratio: 1;
  background-color: green;
  border-color: black;
  border-style: ridge;
  border-width: 5px;
  box-sizing: inherit;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  margin: 0 auto;
  max-width: 600px;
}

.cell {
  aspect-ratio: 1;
  border-color: black;
  border-style: groove;
  box-sizing: inherit;
}

.stone {
  border-collapse: collapse;
  border-radius: 50%;
  border-style: solid;
  height: 70%;
  margin: 10%;
  width: 70%;
  visibility: hidden;
}

.black {
  background-color: black;
  border-color: black;
  visibility: visible;
}

.white {
  background-color: white;
  border-color: white;
  visibility: visible;
}

.can-put {
  background-color: rgb(160, 255, 160);
}

.can-put:hover {
  background-color: rgb(255, 120, 120);
}

.form {
  margin: 20px auto;
  text-align: center;
}

.message {
  height: 60px;
  margin: 0 auto;
  text-align: center;
}

.hidden {
  display: none;
}