.vslider {
  -webkit-appearance: slider-vertical;
  width: 20px;
  height: 140px;
}

output,
input {
  color: #4f4f42;
  font-style: italic;
}

input[type='button'] {
  padding: 0 5px;
}

.applet {
  background-color: #eeeee0;
  border-radius: 5px;
  box-shadow: 1px 1px 2px gray;
  display: grid;
  /*grid-gap: 5px;*/
  grid-template-columns: auto minmax(256px, 1fr) auto;
  grid-template-rows: repeat(4, auto);
  max-width: 30em;
  margin: 0 auto;
  place-items: center center;
}

#freq_1_lbl,
#freq_2_lbl,
#freq_1_plus_div,
#freq_2_plus_div,
#freq_1_minus_div,
#freq_2_minus_div {
  padding: 5px;
}

#freq_1_lbl {
  grid-row: 1/2;
  grid-column: 1/2;
}

#freq_2_lbl {
  grid-row: 1/2;
  grid-column: 3/4;
}

#freq_1_plus_div {
  grid-row: 2/3;
  grid-column: 1/2;
}

#freq_2_plus_div {
  grid-row: 2/3;
  grid-column: 3/4;
}

#freq_1_minus_div {
  grid-row: 4/5;
  grid-column: 1/2;
}

#freq_2_minus_div {
  grid-row: 4/5;
  grid-column: 3/4;
}

#freq_1_sldr {
  grid-row: 3/4;
  grid-column: 1/2;
}

#freq_2_sldr {
  grid-row: 3/4;
  grid-column: 3/4;
}

#canvas_div {
  grid-row: 2/4;
  grid-column: 2/3;
  height: 150px;
  justify-self: stretch;
}

#play_btn_div {
  grid-row: 4/5;
  grid-column: 2/3;
  padding-top: 5px;
  padding-bottom: 5px;
}

#canvas {
  border: 1px solid #666660;
  box-shadow: 1px 1px 2px #888888;
  width: 100%;
  height: 100%;
}