style.css

:root {
  --background-color: rgb(240, 250, 250);
  --text-color: rgba(50, 50, 50, 0.9);
  --board-color: rgb(176, 218, 176);
  --pixel-border-color: rgba(100, 100, 100, 0.5);
  --lit-pixel-color: rgba(50, 50, 50, 0.8);
}

html {
  height: 100vh;
}

body {
  align-items: center;
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-flow: column nowrap;
  font-family: sans-serif;
  font-size: 2em;
  height: 95vh;
  justify-content: flex-start;
  margin: 0;
  padding-top: 5vh;
}

div {
  box-sizing: border-box;
}

#mainHeader {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

#score {
  font-weight: bold;
}

#board {
  align-items: center;
  background-color: var(--board-color);
  display: flex;
  flex-flow: column nowrap;
  height: 80vw;
  justify-content: space-evenly;
  width: 80vw;
}
@media (orientation: landscape) {
  #board {
    height: 80vh;
    width: 80vh;
  }
}

#board .row {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  width: 100%;
}

#board .row .pixel {
  border: 1px solid var(--pixel-border-color);
  flex: 1;
  height: 100%;
}

#board .row .pixel.lit {
  background-color: var(--lit-pixel-color);
}