canvas {
    margin: 2em auto;
    display: block;
    max-width: 60%;
}

form.canvas-controls {
  display: block;
  max-width: 60%;
  margin: 3em auto;
}

form.canvas-controls button {
    display: inline-flex;
    cursor: pointer;
    background-color: #66ADB5;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    margin-right: 0.5em;
}

form.canvas-controls button.alt {
    background-color: #A38AD6;
}

form.canvas-controls button:hover {
    filter: brightness(0.9);
}

form.canvas-controls div.input-group.buttons {
    text-align: center;
}

form.canvas-controls div.input-group {
  display: block;
  width: 100%;
  margin: 1em 0;
}

form.canvas-controls div.input-group input {
  display: block;
  width: 100%;
}

form.canvas-controls div.input-group output {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.3em;
    margin: 0.2em 0;
    border-radius: 5px;
}

form.canvas-controls div.input-group output.binary {
    color: white;
    background-color: #D94A5C;
}

form.canvas-controls div.input-group output.binary.high {
    background-color: #408C94;
}

div.footnote hr {
    display: none;
}

@media screen and (max-width: 769px) {
    article img {
        width: 100%;
    }
    article canvas {
        max-width: 100%;
    }
    article form.canvas-controls {
        max-width: 90%;
    }
}