/* Finger / stylus */
@media (pointer: coarse) {
  html {
    --scale: 1.2;
  }
}

/* Mouse / trackpad */
@media (pointer: fine) {
  html {
    --scale: 1;
  }
}

:root {
  --margin: 4px;
  --bgcolor: #333;
  --font-size-xs: calc(0.7rem * var(--scale));
  --font-size-xxs: calc(0.6rem * var(--scale));
  --font-size-xxxs: calc(0.5rem * var(--scale));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-size: calc(1rem * var(--scale));
  color-scheme: dark;
}

body {
  font-family: "Fira Code", ui-monospace, SFMono-Regular,
               Menlo, Consolas, "Liberation Mono", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
  color: #fdfdfd;
  background: var(--bgcolor);
  margin: var(--margin);
}

svg {
  fill: #fdfdfd;
}
button:is(:disabled) svg {
  fill: graytext;
}

h1, h2, h3, h4, h5, h6, ul, hr {
  margin: 0;
}

input, button, textarea, select {
  font: inherit;
  /* The default (auto) can be unreasonably wide in some cases. */
  min-width: 2rem;
}

.flex {
  display: flex;
}

/* Deprecated */
.hidden {
  display: none;
}