:root {
  --font-family: 'Bespoke Sans', sans-serif;
  --font-family-mono: Droid Mono, Menlo, Consolas, monospace;
}

body {
    overscroll-behavior: contain;
}

* {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bespoke Slab', sans-serif;
  font-weight: 70;
}

input[type="range"] {
  border: none;
}

.optgroup-header {
  font-size: 0.9em;
  opacity: 0.8;
  font-weight: 700;
}

/* Fullscreen layout */
.container.fullscreen {
  min-height: calc(var(--vh, 1vh)*100 - 2*var(--padding-internal));
}

/* Remove frame on small screens */
@media (max-width: 600px), (max-height: 600px) {
  .container.fullscreen {
    min-height: calc(var(--vh, 1vh)*100);
  }
}

/* Flexbox fix for IE11, per https://github.com/philipwalton/flexbugs */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .container.fullscreen {
    /* IE11 miscalculates the height, so add some slack */
    min-height: calc(var(--vh, 1vh)*100 - 3*var(--padding-internal));
  }
}