style.css

:root {
  --default-top-padding: 1.5em;
}

body {
  min-height: 50vh;
  font-family: helvetica, Arial, sans-serif;
  font-size: 2vmin;
  background-color: #555;
  color: white;
  margin: 3vmin 4vmin 2vmin 4vmin;
}

/* iPad portait */
@media (max-width: 768px) {
  body {
    font-size: 3vmin;
  }

  button, input {
    padding-top: 2vmin;
  }
}

/* iPhone landscape only */
@media (max-width: 568px) {
  body {
    font-size: 4vmin;
  }
}

/* iPhone portait only */
@media (max-width: 320px) {
  body {
    font-size: 4vmin;
  }

}

*:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

dialog {
  color: white;
}

dialog:focus {
  outline: none;
}

dialog::backdrop {
  background: rgba(85, 85, 85, 0.80);
}

dialog.busy-dialog::backdrop {
  background: inherit;
}

.error-dialog {
  color: white;
  background-color: #AE0000;
}

.busy-dialog {
  color: white;
  background-color: #006900;
}