stroke-input.css

:root{
  --key-fill: #181818;
  --umbrella-orange: #FFCE73;
  --umbrella-yellow: #FFFF80;
  --umbrella-blue: #BBBBFF;
}

@font-face {
  font-display: swap;
  font-family: 'Stroke Input Font';
  src: url('StrokeInputFont.ttf') format('truetype');
}

a {
  color: var(--umbrella-blue);
}

body {
  background: black;
  color: white;
  font-family: sans-serif;
  margin: 0;
  overflow-wrap: break-word;
  padding: 1em;
}

button {
  font-size: 16px;
  margin: 0.1em 0.15em;
  min-width: 1em;
  padding: 0.25em 0.3em;
}

footer {
  border-top: 2px solid white;
  margin-top: 1.5em;
  padding-top: 0.75em;
}

h1 {
  font-size: 1.4em;
  margin-top: 0.3em;
}

h2 {
  font-size: 1.3em;
  margin-top: 1.5em;
}

h3 {
  font-size: 1.1em;
}

html {
  background: var(--key-fill);
  margin: 0 auto;
  max-width: 44em;
}

img {
  vertical-align: middle;
}

li {
  margin-bottom: 0.5em;
}

.candidate-group {
  display: inline-block;
}
.candidate-group dd {
  color: var(--umbrella-orange);
  display: inline;
  margin: 0 1em 0 0.3em;
}
.candidate-group dt {
  display: inline;
}
.candidate-group dt::after {
  content: ':';
}

.candidates-row {
  height: 6em;
  line-height: 1.7;
  vertical-align: baseline;
}
.candidates-row td {
  width: 100%;
}

.controls th, .controls td {
  padding: 0.3em;
}

.disabled {
  color: #FF5E5E;
}

.enabled {
  color: lime;
}

.notice {
  border: 1px solid white;
  margin-top: 0.5em;
  padding: 0.5em;
}

.strokes {
  color: var(--umbrella-yellow);
  font-family: 'Stroke Input Font';
}

#candidates {
  margin: 0;
}

#candidates-pagination {
  display: block;
  margin: 0;
  text-align: right;
}

#input {
  box-sizing: border-box;
  display: block;
  font-size: 16px;
  height: 7em;
  margin: 0.5em auto;
  width: 100%;
  resize: vertical;
}

#input-container {
  border: 2px solid white;
  padding: 0.3em 0.7em 0;
  margin: 1.5em 0;
}

#input-container table {
  border-spacing: 0.7em 0.4em;
}