body { background: lightgray; }

canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* border: 1px solid gray; */
}

.center {
  width: 90%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

@media(max-height: 450px) {
  .center {
    display: none;
  }
}

.screen-notice {
  text-align: center;
  padding-top: 2em;
}

@media(min-height: 450px) {
  .screen-notice {
    display: none;
  }
}

#rule-presets li {
  display: inline;
  list-style-type: none;
}

#rule-presets button {
  margin: 0.25em;
  padding: 0.25em;
}