:root {
  --btn-width:      185px;
  --btn-height:     120px;
  --btn-hs-height:  70px;
  --btn-font-sz:    20px;
  --btn-v-offset:   50px; /* vertical distance from center to each button */
}

@media (max-width: 600px), (pointer: coarse) {
  :root {
    --btn-width:      140px;
    --btn-height:      88px;
    --btn-hs-height:   52px;
    --btn-font-sz:     15px;
    --btn-v-offset:    38px;
  }
}

.nav-info-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--btn-width, 185px);
  height: var(--btn-height, 120px);
  padding: 0px 10px;
  background: rgba(0,10,0,0.75);
  box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.25);
  color: #222;
  font-size: var(--btn-font-sz, 20px);
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
  z-index: 1000;
  cursor: pointer;
}

#start_restart_btn {
  top: calc(50% - var(--btn-v-offset, 50px));
}

#all_time_scores_btn {
  top: calc(50% + var(--btn-v-offset, 50px));
  left: 50%;
  transform: translateX(-50%);
  height: var(--btn-hs-height, 70px);
}