body {
  margin: 0;
  font-family: sans;
}
header {
  display: flex;
  justify-content: space-between;
  align-content: stretch;  
}
header * {
  font-size: 2rem;
  text-align: center;
  vertical-align: middle;
}
@media all and (orientation: portrait) {
  .board {
    background-color: rgba(32, 32, 32, 0.9);
    display: grid;
    grid-template-columns: repeat(10, 10vw);
    grid-auto-rows: 10vw;
    max-width: 100vw;
  }
}
@media all and (orientation: landscape) {
  .board {
    background-color: rgba(32, 32, 32, 0.9);
    display: grid;
    grid-template-columns: repeat(10, 9.4vh);
    grid-auto-rows: 9.4vh;
    max-width: 94vh;
  }
}
.cell {
  outline: 1px solid #555;
  text-align: center;
  font-weight: bold;
  padding-top: 1rem;
}
.corner {
  background-color: #fff;
  outline: none;
}
.edgeCell {
  outline: 1px solid #fff;
  background-color: #888;
}
.edgeCell.selected {
  outline: 1px solid black;
  background-color: orange;
}
.edgeCell.hit {
  outline: 1px solid black;
  background-color: red;  
}
.edgeCell.reflection {
  outline: 1px solid black;
  background-color: yellow;
}
.gridCell.guess1 {
  border: 1px solid rgba(0, 224, 164, 0.2);
  background-color: rgba(0, 224, 164, 0.2);
  border-radius: 50%;
}
.gridCell.guess2 {
  border: 1px solid rgba(0, 224, 0, 1);
  background-color: rgba(0, 224, 0, 1);
  border-radius: 50%;
}

.modal {
  display: none;
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 64, 0.7);
}
.over {
  display: none;
  position: absolute;
  left: 2vw;
  right: 2vw;
  top: 8%;
  padding: 1em;
}
.solutionMessage {
  text-align: center;
  background-color: #fff;
  padding: 1em;
  border-radius: 1em;
}
.over {
  font-size: 2.2rem;
}