#main {
  text-align: center;
  margin: auto;
}

#head {
  font-size: 40px;
}

#menu {
  font-size: 30px;
}

#grid {
  height: 600px;
  width: 500px;
  vertical-align: top;
}

#buttons {
  height: 600px;
  width: 250px;
  background-color: lightgrey;
  border-left: 3px solid black;
  vertical-align: top;
}

#mtable td {
  text-align: center;
  height: 40px;
  padding: 5px;
}

#mtable {
  margin: auto;
}

.mb {
  font-size: 20px;
  height: 40px;
  width: 170px;
}

.nb {
  font-size: 20px;
  height: 40px;
  width: 40px;
}

.cell {
  font-size: 25px;
  text-align: center;
  border: none;
  height: 40px;
  width: 40px;
}

.uniqueCell {
  background-color: lightblue;
  font-size: 25px;
  text-align: center;
  border: none;
  height: 40px;
  width: 40px;
}

.relatedCell {
  background-color: lightgrey;
  font-size: 25px;
  text-align: center;
  border: none;
  height: 40px;
  width: 40px;
}

.wrongCell {
  background-color: rgba(255, 0, 0, 0.5);
  font-size: 25px;
  text-align: center;
  border: none;
  height: 40px;
  width: 40px;
}

.in td {
  border: 1px solid black;
}

.in {
  height: 130px;
  width: 130px;
  border-collapse: collapse;
}

.box {
  border: 3px solid black;
  padding: 0px;
}

.out {
  border-collapse: collapse;
  margin: auto;
}

#diagBoxOut {
  font-size: 25px;
  height: 610px;
  width: 800px;
  position: relative;
  top: -610px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

#diagBoxIn {
  height: 250px;
  width: 400px;
  background-color: rgb(255, 255, 255);
  position: relative;
  top: 200px;
  left: 200px;
  border: 5px solid rgb(255, 255, 255);
  border-radius: 30px;
}

#play {
  font-size: 25px;
  position: relative;
  left: 120px;
}

#diagBox {
  position: relative;
  left: 50px;
}