style.css (Snake)

/* varaible so the snake color can be changed at runtime */
:root {
  --snake-color: purple;
}

/* all of the text is centered */
body {
  text-align: center;
}

/* making the table have no spaces between cells (for smooth grass look) */
table {
  border-collapse: collapse;
  margin: auto;
}

/* the size of the cells */
td {
  height: 25px;
  width: 25px;
}

/* makes sure the apple image doesn't expand the cell */
td img {
  display: block;
  padding: 0;
  margin: 0;
}

/* styles for certain types of cells */
.border {
  background-color: gray;
  border: 1px solid black;
  width: 23px;
  height: 23px;
}

.grass, .fruit {
  background-color: lightgreen;
}

/* using a varaible allows this to change at runtime*/
.snake {
  background-color: var(--snake-color);
}

/* pre-game styles to show what is selected and what isn't */
.selected-size {
  background-color: lightcoral;
}

.unselected-color {
  border: none;
}

.selected-color {
  border: 1px solid black;
  height: 23px;
  width: 23px;
}

/* allowing the proper scores/instructions to show or hide */
.pregame #preGameInstructions, .postGame .scoring, .game #gameInstructions {
  display: display;
}

.preGame .scoring, .preGame #gameInstructions, .game #preGameInstructions, .game .scoring, .postGame #preGameInstructions, .postGame #gameInstructions {
  display: none;
}