html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}
/* End of reset */

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status {
  margin: 100px;
  border: 1px solid black;
  background-color: white;
  font-size: 3rem;
  box-shadow: 20px 20px 20px black;
  border-radius: 10px;
  padding: 50px 100px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 10px;
  height: 550px;
  width: 500px;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;
  width: 150px;
  height: 150px;
  border-radius: 10%;
  border: 1px solid black;
  box-shadow: 20px 20px 20px black;
  transition: 500ms;
}

.cell:hover {
  align-self: end;
  box-shadow: 10px 10px 40px black;
  background-color: #cee0e5;
}

dialog {
  border-radius: 20px;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.5rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type="text"] {
  font-size: 1.5rem;
}

.reset-btn,
.form-row.submit {
  align-self: center;
}

.reset-btn,
.form-row.submit > input {
  font-size: 1.5rem;
}