.grid-container {
  display: grid;
  grid-template-columns: repeat(15, auto);
  grid-template-rows: repeat(15, auto);
  justify-content: center;
  grid-gap: 1px;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 541px;
  height: 541px;
  margin: auto auto auto auto;
  background-color: black;
  padding: 1px;
}
.rack-container {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: repeat(1, auto);
  justify-content: center;
  grid-gap: 1px;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 252px;
  height: 35px;
  margin: 12px 0px auto auto;
  background-color: black;
  padding: 1px;
}
.whiteBox {
  height: 35px;
  width: 35px;
  background-color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
  color: black;
}

.redBox {
  height: 35px;
  width: 35px;
  background-color: red;
  color: black;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
}

.blueBox {
  height: 35px;
  width: 35px;
  background-color: blue;
  color: black;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
}

.blue2Box {
  height: 35px;
  width: 35px;
  background-color: aqua;
  color: black;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
}

.pinkBox {
  height: 35px;
  width: 35px;
  background-color: pink;
  color: black;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
}

.button {
  border: none;
  color: white;
  padding: 15px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#rackAndHint {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
#rackAndHint2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

#playerTurn {
  text-align: center;
}
#theHint {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#round {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#round2 {
  padding-top: 10px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#roundGuide {
  text-align: center;
  margin-top: auto;
  font-family: Arial, Helvetica, sans-serif;
}

#wholeLayout {
  display: grid;
  grid-template-columns: repeat(2, auto);
}