/* Finger / stylus */
@media (pointer: coarse) {
  :root {
    --scale: 1.2;
    --gap: 1rem;
  }
}

/* Mouse / trackpad */
@media (pointer: fine) {
  :root {
    --scale: 1;
    --gap: 0.5rem;
  }
}

:root {
  --margin: 4px;
  --bgcolor: #111;
}

*,
*::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-size: calc(1rem * var(--scale));
  font-feature-settings: "liga" 1, "calt" 1;
  color: #fdfdfd;
  background: #111;
  padding-top: 0.5rem; /* room for title bar */
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.25;
}

input, button, textarea, select {
  font: inherit;
}

.main-body button {
  padding: 0.2rem 0.4rem;
}

.hidden {
  display: none;
}

#title-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--bgcolor);
}

#status {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 5px;
}