/* The look: a carving kit from a drugstore in 1978. Kraft card, black ink, one loud orange, a wax-candle yellow.
   Square corners, printed labels, things a degree off true. Nothing glassy. */

:root {
  --ink: #15110d;
  --ink-2: #2a221b;
  --night: #0b0a10;
  --kraft: #c9a66b;
  --kraft-dark: #a8844c;
  --bone: #efe4cc;
  --orange: #e8701a;
  --orange-deep: #b8480c;
  --wax: #ffd36a;
  --moss: #4f5b2a;
  --blood: #8e1f12;
  /* Mystery Quest for subheadings and labels; a clear sans for buttons, controls and anything read at a glance */
  --font-display: "Mystery Quest", "Trebuchet MS", sans-serif;
  --font-body: "Grandstander", "Trebuchet MS", sans-serif;
  --shadow: 3px 3px 0 var(--ink);
}

@font-face { font-family: "Mystery Quest"; src: url(fonts/mystery-quest.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Grandstander"; src: url(fonts/grandstander.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  font-synthesis: none;
  overflow: hidden;
}

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