/*!
 * base.css — the reset the onsgame template set needs, in place of the
 * Tailwind v2 preflight that used to be loaded from
 * _files/css/tailwind.min.css (2.9 MB).
 *
 * Only the preflight rules that Bootstrap 3.4.1 does *not* already provide
 * are kept here, so the pages render exactly as they did before. Bootstrap
 * and the site stylesheet must keep loading AFTER this file: that ordering
 * is what makes Bootstrap win on the handful of properties the two resets
 * share (heading sizes, list margins, body font, ...).
 */

/* Tailwind preflight: box-sizing + the "everything has a border, but no
   width and no colour of its own" reset. */
*,
::after,
::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Bootstrap resets list margins but not the markers or the indent. */
ol,
ul {
  list-style: none;
  padding: 0;
}

/* Bootstrap resets the font of form controls but not their padding. */
button {
  background-color: transparent;
  background-image: none;
}

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
}

textarea {
  resize: vertical;
}

/* Bootstrap only sets vertical-align on <img>, not the block display. */
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}

/* Bootstrap only constrains image width when printing. */
img,
video {
  max-width: 100%;
  height: auto;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

table {
  text-indent: 0;
}

[hidden] {
  display: none;
}

/*
 * Tailwind's .container component. Bootstrap's own .container takes over
 * from 768px up (it is loaded later), so the only range in which Tailwind's
 * rules were actually in effect is 640px-767px, where the container was
 * capped at 640px instead of staying fluid. That cap is kept here to avoid
 * changing the layout; drop this block to let the container stay fluid on
 * narrow screens.
 */
.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}