/* Stylesheet for The Future Now comic. */

body {
  /* Always display scroll bars. */
  overflow-y: scroll;
  display: block;
}

/* Start by hiding everything to prevent image flashing. */
body > * {
  display: none;
}

div {
  margin: auto;
  max-width: 1000px;
}

.bleed {
  width: 100%;
  margin: auto;
}

.tier {
  width: 90%;
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

.equalPanel {
  max-width: 450px;
  /* Use 100% width for flexbox adjustment. */
  width: 100%;
}

.midSkinnyPanel {
  max-width: 360px;
  /* Use 100% width for flexbox adjustment. */
  width: 100%;
}

.midWidePanel {
  max-width: 540px;
  /* Use 100% width for flexbox adjustment. */
  width: 100%;
}

.button {
  /* This makes the little hand. */
  cursor: pointer;
}

.bottomPadded {
  padding-bottom: 5em;
}

.skinnyPanel {
  max-width: 270px;
  /* Use 100% width for flexbox adjustment. */
  width: 100%;
}

.widePanel {
  max-width: 630px;
  /* Use 100% width for flexbox adjustment. */
  width: 100%;
}

#header {
  margin-bottom: -10%;
  width: 100%;
}