.elements { /*TABLE*/
  border: 1px solid lightblue;
  font-family: Inconsolata, monospace;
  position: absolute;
  right: 1em;
  top: 0;
}
.elements tr:nth-child(odd) { background-color: rgba(173, 216, 230, 0.50) } /*lightblue*/
.elements tr td:nth-child(even) { background-color: rgba(172, 186, 230, 0.25) } /*analogous to lightblue*/
.elements tr td {
  padding: 0.5em;
  text-align: right;
}
input[type="radio"]:checked ~ .species { margin-top: 1ch }
input[type="radio"]:checked ~ .reveal_if_active {
  max-height: fit-content;
  opacity: 1.0; /*end*/
  transform: scale(1.0);
}
.radio { /*label for input[type="radio"]*/
  font-family: Inconsolata, monospace;
  vertical-align: middle;
}
.species { /*DIV containing Z and Amount*/
  cursor: default; /*make UX smoother*/
  /*top, right, bottom, left*/
  margin: 0 0 1ch 0;
  width: fit-content;
}
table.form { margin-bottom: 0 }
table.form input[type="number"] { width: 9ch }
.grid {
  display: grid;
  grid-gap: 1em; /*allow for space between grid elements*/
  grid-template-columns: calc( 40% - (2em / 3) ) calc( 30% - (2em / 3) ) calc( 30% - (2em / 3) ); /*2 total horizontal gaps = 2em*/
  margin-top: 1em;
}
.grid div span { white-space: nowrap } /*keeps numbers and units together*/
.grid div output { font-family: Vollkorn, serif } /*inline OUTPUT*/
.grid div a { font-variant: petite-caps }
.reveal_if_active {
  max-height: 0;
  opacity: 0.0;
  transform: scale(0.5);
  transition: 250ms;
}
.reveal_if_active input[type="number"] { /*Z and Amount*/
  margin-right: 0; /*dimensionless numbers don't need units*/
  width: 6ch;
}
.reveal_if_active label:last-of-type { padding-left: 0.75ch } /*Amount*/

@media only screen and (max-width: 936px) { /*design breakpoint*/
  .elements { /*TABLE*/
    margin-bottom: 1em;
    margin-left: 1em;
    position: inherit;
  }
  .grid { display: inherit }
  .grid div { padding-bottom: 1em }
  .empty { font-size: 0 } /*hack*/
}

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  .elements { /*TABLE*/
    border-left: 0; /*save precious space*/
    border-right: 0; /*save precious space*/
    margin-left: 0;
    width: calc(100vw);
  }
  .elements tr td {
    font-size: 0.75em;
    padding: calc(0.5em / 3);
    text-align: center;
  }
}