/* Colour Definitions */

:root {
  /* CSS HEX */
  --aquamarine: #00fddcff;
  --cal-poly-green: #2e5339ff;
  --hunter-green: #495f41ff;
  --cambridge-blue: #98b591ff;
  --bright-pink-crayola: #ff5666ff;
  --salmon-pink: #ff9198ff;
  --tea-rose-red: #ffccc9ff;
  --tea-rose-pink: #ffd1ceff;
  --tea-rose-white: #fff3efff;

}

#header {
  background: var(--cambridge-blue);
  color: var(--tea-rose-pink);
}

/* Fix mobile rendering issue */

/* Desktop (wider than 736px) */
@media only screen and (min-width : 736px) {
  .custombr {
    display: block;
    padding: 50px;
  }
}
/* Desktop (wider than 1284px) */
@media only screen and (min-width : 1284px) {
  .custombr {
    display: block;
    padding: 75px;
  }
}


/* Custom theme fonts and backgrounds/styling etc. */

@font-face {
  font-family: "PlaywriteCU";
  src: url("/font/PlaywriteCU-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "IBMPlexMono-ExtraLight";
  src: url("/font/IBMPlexMono-ExtraLight.ttf") format("truetype");
}

body {
  background-image: url("/img/banner/paper_square2.webp");
  background-repeat: repeat;
  font-family: PlaywriteCU, cursive, serif;
}

.page-content h3, .page-content h4, .page-content h5, .page-content h6 {
  font-family: serif;
}

p {
  font-family: serif;
}

#banner p {
  font-family: PlaywriteCU, cursive;
}

li {
  font-family: serif;
}

#nav * li {
  font-family: PlaywriteCU, cursive;
}

.story {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  margin-bottom: 30px;
}

.story img {
  margin-bottom: 0;
  padding-bottom: 0;
}

.story figcaption {
  background: #FEE;
  margin-top: 0;
  padding: 10px;
}

.story p {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: IBMPlexMono-ExtraLight, monospace;
  color: #000;
}

blockquote p {
  margin-top: 0;
  padding-top: 0;
}

div .toc {
  background: var(--tea-rose-white);
  padding: 10px;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  display: block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}