style.css

.chooseColor {
  display:grid;
  grid-template-rows: 1fr 1fr;
  height: 50%;
}

p.chooseColorHeader {
  text-align: center;
  font-size: 500%;
  width:100%;
  left:50%; 
}

.twoModes {
  display:grid;
  grid-template-columns: 1fr 1fr;

}

.whiteCell {
  margin: auto;
  background:white;
  height:100px;
  width:100px;
  float: left;
  border: 10px solid #333;
}

.blackCell {
  margin: auto;
  background:#333;
  height:100px;
  width:100px;
  float: right;
  border: 10px solid #333;
}

.chooseDifficulty {
  display:grid;
  grid-template-rows: 1fr 1fr;
  text-align:center;
  height: 50%;
}


p.chooseDifficultyHeader {
  color: #8CBDED;
  text-align: center;
  font-size: 500%;
  width: 100%;
}

input {
  width: 100%;
}

td {
border: 1px solid #333;
height: 100px;
width: 100px;
border-style: solid;
border-width: 15px;
visibility: hidden;
}

table{
  position:absolute;
  left:50%;
  margin-left:-150px;
  top:10%;
}

body {
  background:linear-gradient(#ffd700, #ffe766, #fff3b2);
  height: 100%;
}