body {
  background-color: green;
}
#help {
  color:ivory;
  font-size:2.4vmin;
  font-family: sans-serif;
  grid-row-start:11;
  margin-top:2vmin;
  grid-column:1/span 8;
  padding-left:3vmin;
}
#main_panel {
  display:grid;
  grid-template-rows: repeat(17,5vmin);
  grid-template-columns: repeat(8,1fr);
  width:78vw;
  background-color: green;
  padding: .5vmin;
}
.main, .back_row {
  grid-column: 1 / span 1;
  width:90%;
  justify-self:center;
}
.highlight {
  outline:1vmin solid lightgreen;
}
#temp_panel, #final_panel {
  display:flex;
  flex-direction: column;
  align-items: center;
  background-color: mediumseagreen;
  width:9vw;
}
.temp, .final {
  width:90%;
  margin-top:1vmin;
}
#game {
  display:flex;
  justify-content: center;
}
.button {
  margin-top:1vmin;
  padding:.5vmin 1vmin;
  background-color:blue;
  color:white;
  font-size:2vmin;
}
@media (orientation:portrait) {
  body {
    background-color:mediumseagreen;
  }
  #game {
    flex-wrap:wrap;
    justify-content: space-between;
  }
  #temp_panel, #final_panel {
    flex-direction: row;
    width:48.3vw;
  }
  .button {
    margin:1vw
  }
  .temp, .final {
    width:18%;
    margin:.7vw;
  }
  #temp_panel {
    order:1;
  }
  #final_panel {
    order:2;
  }
  #main_panel {
    order:3;
    width:98vw;
  }
}
