.sphere-row {
  text-align: center;
  font-size: 6vmin;
}
.space,
.sphere {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0.0625em 0.5em;
}
.sphere {
  transition: 0.25s ease all;
  box-shadow:
    inset -0.15em -0.1em 0.5em,
    inset 0 0 0.0625em,
    0 0 0.125em;
  border-radius: 0.5em;
}
.sphere.red {
  background-color: #F00;
}
.sphere.green {
  background-color: #0F0;
}
.sphere.blue {
  background-color: #4BF;
}
.sphere.empty {
  box-shadow:
    inset 0em 0em 0.5em #FFF,
    inset 0 0 0.125em,
    0 0 0.125em;
}
.sphere:hover {
  filter: brightness(1.5) drop-shadow(0 0 0.1em #000);
  cursor: pointer;
}
.instructions-table {
  height: 100%;
  width: 100%;
  display: table;
}
.instructions-cell {
  display: table-cell;
  vertical-align: middle;
  box-shadow: 0 0 5px #000, inset 0 0 2px 5px #FFF, inset 0 0 15px #000;
  border-radius: 10px;
  padding: 15px;
  background-color: #DFD;
}