.blockquote {
  /* Looks nice for a quote, and mimics other interpreters. */
  font-family: monospace;

  /* Offsets the block from the page. */
  background-color: aliceblue;
  border: 2px ridge grey;

  /* Makes the border stay back from the edge of the text, which is nice. */
  padding: 0.5em;

  /* Vorpal is creating a span for this, but to have the border and background
   * work the way we want, we style it as a block. */
  display: block;
}

.title-line {
  font-size: 130%;
}

.version-line {
  font-size: 80%;
}

.author-line, .copyright-line {
  font-size: 90%;
}

.created-with-line {
  font-size: 80%;
}

.continue {
  background-color: khaki;
  padding: 0.5em;
}

.room-heading {
  font-weight: bold;
  background-color: lavender;
}

/* Other room names, not in the heading that describes the current room. */
:not(.room-heading) > .room-name {
  font-weight: bold;
  background-color: lavenderblush;
}

.direction-name {
  font-weight: bold;
  background-color: lavenderblush;
}

.hint {
  font-style: italic;
  background-color: linen;
}

.help-card {
  /* Offsets the block from the page. */
  background-color: beige;
  border: 2px ridge grey;

  /* Makes the border stay back from the edge of the text, which is nice. */
  padding: 0.5em;

  /* Vorpal is creating a span for this, but to have the border and background
   * work the way we want, we style it as a block. */
  display: block;
}

.plaque-card {
  /* Offsets the block from the page. */
  background-color: palegoldenrod;
  border: 2px ridge grey;

  /* Makes the border stay back from the edge of the text, which is nice. */
  padding: 0.5em;

  /* Vorpal is creating a span for this, but to have the border and background
   * work the way we want, we style it as a block or inline-block.  Using
   * inline-block makes it hug the text, which I like better for the plaque. */
  display: inline-block;
}

.nameplate-card {
  /* Offsets the block from the page. */
  background-color: palegoldenrod;
  border: 2px ridge grey;

  /* Makes the border stay back from the edge of the text, which is nice. */
  padding: 0.5em;

  /* Vorpal is creating a span for this, but to have the border and background
   * work the way we want, we style it as a block.  Using inline-size: fit
   * makes it hug the text, and margin centers it. */
  display: block;
  inline-size: fit-content;
  margin: 0 auto;
}

.nameplate-card:first-line {
  font-family: cursive;
}

.ending-card {
  /* Offsets the block from the page. */
  background-color: mediumspringgreen;
  border: 2px ridge grey;

  /* Makes the border stay back from the edge of the text, which is nice. */
  padding: 0.5em;

  /* Vorpal is creating a span for this, but to have the border and background
   * work the way we want, we style it as a block or inline-block.
   * Even worse, there is some bug in which trying to center the content in
   * Inform causes the generated HTML to be all screwy, with the ending-card
   * empty and the text outside it.  Ugh.
   * So, to solve all that, we use block to take up the whole line, inline-size
   * to shrink the background to the content, and margin to center it all. */
  display: block;
  inline-size: fit-content;
  margin: 0 auto;
}

/* https://www.fontspace.com/kbkinderwrite-font-f15885 */
@font-face {
  font-family: 'KBKinderWrite';
  src: local('KBKinderWrite'),
       url('KBKinderWrite.woff') format('woff'),
       url('KBKinderWrite.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.checklist-block {
  /* Make it stand out, and look like paper. */
  display: block;
  background-color: aliceblue;
  border: 1px solid black;

  /* Fit to content. */
  inline-size: fit-content;

  /* Unless the content is larger 30 characters or so. */
  max-width: 30em;

  /* Add padding around the contents. */
  padding: 2em;
}

.checklist-contents {
  /* The story says it's "scribbled out in childish print", so let's emulate
   * that as much as we can. */

  /* A really childish, hand-written-looking font. */
  font-family: 'KBKinderWrite', cursive;
  font-weight: bold;
  font-size: 130%;
}

.personnel-file-card {
  /* Make this look more like a typed document on yellowish paper. */

  display: block;
  background-color: lightyellow;
  font-family: monospace;
  border: 1px solid darkgrey;

  font-size: 75%;
  max-width: 24em;
  padding: 2em;
}

/* Though I can't figure out why, Inform/Vorple creates an empty span of this
 * class before the one with the content.  This hides it. */
.personnel-file-card:empty {
  display: none;
}

/* Text indentation in Inform sucks and is hard to figure out.  Do it in CSS
 * instead, which sucks slightly less. */
.personnel-file-card span {
  display: block;  /* Or else text-indent doesn't work */
  margin-left: 3.2em;  /* Indents all text */
  text-indent: -3.2em;  /* Unindents the first line by the same amount */
}

/* This will be used to highlight interesting words in room descriptions in
 * easy mode. */
.interesting-highlight {
  background-color: aquamarine;
}

/* Don't highlight within the checklist. */
.checklist-contents .interesting-highlight {
  background-color: transparent;
}

img.unicorn {
  content: url(unicorn.jpg);
  /* Center it. */
  display: flex;
  margin: 0 auto;
}

/* Based on https://codepen.io/thetypebeast/pen/KWNGGd by Jennifer */
body.lsd::before {
  content: ""; /* required for ::before */
  position: fixed; /* don't scroll with page */
  z-index: -100; /* place behind elements on page */
  /* fill the page */
  width: 100%;
  height: 100%;
  /* fill the background with a gradient */
  background-image:
      radial-gradient(circle farthest-side at top right, transparent, #def),
      radial-gradient(ellipse farthest-corner at 0% 100%, transparent, #fed);
  animation: lsd-bg-change 3s infinite;
}
@keyframes lsd-bg-change {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-180deg);
  }
}

/* https://www.1001fonts.com/lovecrafts-diary-font.html */
@font-face {
  font-family: 'LovecraftsDiary';
  src: local('LovecraftsDiary'),
       url('LovecraftsDiary.woff') format("woff"),
       url('LovecraftsDiary.woff2') format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* The alien paper uses this strange font.  Can also be applied to body.*/
.alien-paper {
  font-family: 'LovecraftsDiary';
}
/* This is explicitly the paper. */
span.alien-paper {
  /* Make it stand out, and look like paper. */
  display: block;
  background-color: aliceblue;
  border: 1px solid black;

  /* Fit to content. */
  inline-size: fit-content;

  /* Unless the content is larger 30 characters or so. */
  max-width: 30em;

  padding: 1em;
}

/* Though I can't figure out why, Inform/Vorple creates an empty span of this
 * class before the one with the content.  This hides it. */
span.alien-paper:empty {
  display: none;
}

/* When the whole page is in alien paper mode, the alien paper reads in plain
 * English. */
body.alien-paper .alien-paper {
  font-family: 'Roboto', sans-serif;
}

.script-page {
  /* Make it stand out, and look like paper. */
  display: block;
  background-color: aliceblue;
  border: 1px solid black;
  padding: 1em;
  margin: 1em;

  /* Max out at 30 characters or so. */
  max-width: 30em;

  /* TODO: find a typewriter font to replace monospace? */
  font-family: monospace;
}

.script-line {
  padding: 0 7em;
  display: block;
}

/* Sometimes, when a command results in lots of text, it is difficult to find
 * your last command to start reading.  This makes it stand out some. */
.lineinput {
  background-color: #eee;
}

ul.inventory {
  /* The UA default is to have top & bottom margins, but I like the list to
   * look more compact in inventory. */
  margin: 0;
}