html {
  /* Vertical colour gradient */
  background-image: linear-gradient(to bottom,  gainsboro, silver);
  background-image: -webkit-linear-gradient(top,  gainsboro, silver);
  background-attachment: fixed;
  width: 100%;
  /* Fallback colour */
  background-color: papayawhip;
}
body {
  background-color: transparent;
  margin: 10% 0 0 0;
  font-size: 100%;
  text-align: center;
  width: 100%;
}
hr {
  border-top: 1px solid #000;
}

#passages {
  /* Box background (white with 70% opacity) */
  background-color: rgba(255, 255, 255, 0.7);

  /* Border */
  border: 2px solid white;

  /* Rounded corners */
  border-radius: 1em;

  /* Centered box */
  display: inline-block;
  width: 60%;
  min-height: 40%;
  margin:auto;
  margin-bottom: 5%;
  padding: 0px;
}

.passage {
  margin: 0px;
  padding: 2em;

  /* Text formatting */
  color: black;
  font-size: 100%;
  text-align:justify;
}

.red,
.green {,
  transition: all .7s;
  -webkit-transition: all .7s;
}
.red {
  color: #420000;
}
.red:hover {
  color: #DD0000;
}
.green {
  color: #004200;
}
.green:hover {
  color: #00DD00;
}

/* Links */
a.internalLink,
a.externalLink {
  color: royalblue;
  padding: 2px;
}
a.internalLink:hover,
a.externalLink:hover {
  color: deepskyblue;
  text-decoration: none;
}
a.gamepadSelected {
  border: 2px dotted blue;
  padding: 0px;
}

/* Shrink the page when viewed on devices with a low screen width */
@media screen and (max-width: 960px) {
  #passages { width: 75%; }
}
@media screen and (max-width: 840px) {
  #passages { width: 85%; }
}
@media screen and (max-width: 720px) {
  #passages { width: 95%; }
}