:root {
    --text73: #000000;
    --background73: #BFEFFF;
    --outline73: #000000;
    --shadow73: #B0D7EE;
}

.navButton {
  background-color: var(--background73);
  border-radius: 1em;
  box-shadow: var(--shadow73) 0 -6px 6px inset;
  /* - The letters on the button - */
  color: var(--text73);
  font-family: -apple-system,sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  /* -- */
  margin: 5px; /* Spacing around the button */
  /*  outline: 1px solid var(--outline73); / * outline width, type, color. */
  border: 1px solid var(--outline73);
  padding: .15rem 1rem;
  quotes: auto;
  text-align: center;
}

.navButton:active {
  transform: scale(1.025);
}

/* THIS IS FOR SMALL SCREENS */
@media (max-width: 980px) {  /* On my iPhone 7 the width must be 980px.  Setting value to 0-980px this is done, 981px-inf. it's not. */
  .navButton {
    font-weight: 300;
    /* font-size: 1.5rem;
    padding: .1rem 0.8rem; /* give the text some extra room around it. */
  }
}