@import url("https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");

body {
  background-color: bisque;
}

.header {
  font-family: "Shantell Sans", cursive;
  display: flex;
  justify-content: center;
  margin-bottom: 0.5em;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 2em;
}

.button {
  font-family: "Shantell Sans", cursive;
  margin-bottom: 0.5em;
  width: 8em;
  border: solid;
  border-radius: 50px;
}

.grid {
  height: 40em;
  width: 40em;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.row {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.square {
  height: 100%;
  width: 100%;
  border-style: none;
  background-color: rgb(255, 255, 255);
}

.clicked {
  background-color: rgb(162, 124, 197);
}

.square:hover {
  background-color: rgb(251, 183, 183);
}

.on {
  background-color: rgb(44, 198, 44);
}