canvas {
  width: 70%;
  border: 1px solid black;
  margin: auto;
}
div.io { 
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 2%; 
  text-align: center;
}
div.io>h2 {
  margin: 0.1em 0em;
  padding: 0.1em;
  font-size: 1.7em;
}
div.io.col2 {
  width: 49%;
  text-align: center;
  padding: 0em 0.2em;;
}
label {
  font-size: 0.7em;
}
button {
  display: block;
  font-size: 1em;
  margin: auto;
  width: 100%;
}
p {
  margin: 0.1em;
  font-size: 1.2em;
}

@media screen and (orientation: landscape) {
  canvas {
    width: 90%;
  }
  div.io {
    width: 49%;
  }
  div.io.col2 {
    width: 100%;
  }
  label {
    font-size: 1em;
  }
  button {
    display: inline-block;
    width: 70%;
  }
}
/* desktop */
@media screen and (min-width: 900px) {
  canvas {
    width: 90%;
  }
  div.io {
    width: 49%;
  }
  div.io.col2 {
    width: 100%;
  }
  label {
    font-size: 1em;
  }
  button {
    display: inline-block;
    width: 60%;
    font-size: 1.5em;
  }
}