client.css

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue,
  Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(85ch, 100%)
    1fr;
}

.wrapper > * {
  grid-column: 2;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.row {
  margin: 2% 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(3vw, 21px);
}

.query {
  margin-top: 15%;
  flex-flow: row wrap;
  line-height: 0;
}

.query > * {
  font-size: 1.1em;
}

.row p {
  letter-spacing: 1px;
  flex-basis: 0;
  padding-right: 1ch;
}

span {
  display: block;
  flex-basis: 0;
  padding-right: 1ch;
}

input {
  font-family: 'Courier New', Courier, monospace;
  font-size: max(3.5vw, 21px);
  display: inline-block;
  border: none;
  text-align: left;
  font-style: italic;
  margin-bottom: -5px;
  font-size: 1.1em;
}

.input-this {
  width: 4ch;
}

.input-that {
  width: 5ch;
}

.item {
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

.tool {
  font-family: 'Courier New', Courier, monospace;
  color: blue;
}

textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
  outline: 0 none;
}

.hidden {
  display: none;
}

.sidebar {
  background: #f0f0f0;
  padding: 1em 1em;
  min-height: 100%;
}

.footer {
  padding: 1rem;
  text-align: center;
  font-size: .9rem;
}

.send-note {
  font-size: .75rem;
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}