:root {
      --body-bg-image: url(/deltablog/assets/blog_bg.png);
      --header-image: url(/deltablog/assets/gerson_study.gif);
      /* colors */
      --content: #FFF8D9;
      --link-color: #fff;
      /*--container-color: firebrick;*/
      /*--header-color: darkslategrey;*/
      --main-color: transparent;
      /*--blogposts-color: yellow;*/
      /*--footer-color: yellow;*/
  }

  @font-face {
      font-family: "8-bit Operator Undertale Mono";
      src: url(/deltablog/assets/8-bit_operator_mono.ttf);
  }

  @font-face {
      font-family: "Greater Determination SB";
      src: url(/deltablog/assets/greater-determination-sb.otf);
  }

  html {
      margin: 0;
      height: 100%;
      max-width: 100%;
      overflow-x: hidden;
  }

  body {
      margin: 0;
      height: 100%;
      background-color: #7C432B;
      background-size: 250px;
      background-image: var(--body-bg-image);
      cursor: url(/deltablog/assets/cursor_auto.png), auto;
  }

  p {
      color: white;
      font-family: "8-bit Operator Undertale Mono", Monospace;
  }

  a {
      color: var(--link-color);
      text-decoration: none;
      font-weight: 100;
  }

  a:hover {
      cursor: url(/deltablog/assets/cursor_auto.png), auto;
  }

  h1,
  h2,
  h3 {
      font-weight: bold;
      color: white;
      font-family: "8-bit Operator Undertale Mono", Monospace;
      margin: 0em;
  }

  h1 {
      font-size: 1.5em;
      padding: 0px 0px 0px 23px;
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 15px;
  }

  h1:hover {
      background-image: url(/deltablog/assets/links_heart.svg);
      cursor: url(/deltablog/assets/cursor_pointer.png), pointer;
  }

  h2 {
      font-size: 3em;
      text-align: center;
  }

  h3 {
      color: darkgray;
  }

  ol {
      font-family: arial;
      font-size: smaller;
      color: darkgray;
  }

  li {
      margin: 1em 0em;
      background-color: transparent;
  }

  * {
      box-sizing: border-box;
  }

  #container {
      max-width: 900px;
      margin: 0 auto;
      background-color: var(--container-color);
  }

  #headerAreaFlex {
      height: 100%;
      display: flex;
      justify-content: center;
  }

  #header {
      width: 400px;
      height: 150px;
      margin-top: 3em;
      background-image: var(--header-image);
      background-repeat: no-repeat;
      background-position: center;
      background-color: var(--header-color);
      margin-right: 0.5em;
  }

  #headerBlog {
      width: 245px;
      margin-top: 2em;
      margin-bottom: 1em;
  }

  #headerBlog img {
      width: 100%;
  }

  #flex {
      width: auto;
      display: flex;
      justify-content: center;
  }

  main {
      background-color: var(--main-color);
  }

  .blogposts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: var(--blogposts-color);
  }

  .blog,
  .book {
      border: 20px solid transparent;
      padding-top: 0px;
      border-image: url(/deltablog/assets/border.png) 26 fill;
  }

  .blog {
      font-family: "8-bit Operator Undertale Mono", Monospace;
      width: 20em;
      margin: 1em;
  }

  .book {
      width: 100%;
      overflow: hidden;
      z-index: 1;
      padding: 1em;
      margin: 0em 2em;
  }

  .book p {
      font-family: Arial;
      color: lightgray;
  }

  .footnotes {
      border: 2px solid lightgray;
      padding: 0em 0.5em 0em 0.5em;
      margin-top: 2em;
  }

  .footnotes p {
      font-family: "8-bit Operator Undertale Mono", Monospace;
      margin: 0.5em 0em;
  }

  sup {
      text-decoration: underline;
  }

  sup:hover {
      text-decoration: none;
      background-color: #7C4A17;
  }

  .reference:target {
      background-color: #7C4A17;
  }

  li:target {
      background-color: #3C240B;
  }

  #1up {
      scroll-margin-top: 100px;
  }

  footer {
      padding: 10px;
      text-align: center;
      color: white;
      font-family: "8-bit Operator Undertale Mono", Monospace;
  }

  .captions {
      display: flex;
      align-items: center;
      text-align: center;
  }

  .captions p {
      font-size: smaller;
      color: gray;
      margin: 5px 0px;
  }

  span {
      font-family: '8-bit Operator Undertale Mono';
      font-size: 1.25em;
  }

  #flame {
      background-image: url(/deltablog/assets/flame.gif);
      background-repeat: no-repeat;
      background-size: contain;
      height: 4em;
      width: 4em;
      top: 4em;
      z-index: 1;
      position: absolute;
      animation: flame 7s forwards infinite;
      animation-timing-function: linear;
  }

  @keyframes flame {
      0% {
          transform: rotate(0deg) translateX(0.25em) rotate(0deg);
      }

      100% {
          transform: rotate(360deg) translateX(0.25em) rotate(-360deg);
      }
  }

  #musicplayer img {
      position: fixed;
      bottom: 1em;
      left: 1em;
  }

  #musicplayer p {
      position: fixed;
      bottom: 1em;
      left: 7em;
  }

  #save {
      display: flex;
      justify-content: center;
  }

  #susie {
      background-image: url(/deltablog/assets/susie_look_1.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 6em;
      height: 8em;
      position: fixed;
      bottom: 1em;
      left: 1em;
      z-index: 2;
  }

  #susie:hover {
      background-image: url(/deltablog/assets/susie_look_2.png);
  }

  #study,
  #studyinner {
      position: absolute;
      left: 50%;
      top: 0%;
      width: 1920px;
      margin-left: -960px;
  }

  #study img,
  #studyinner img {
      height: auto;
      width: 100%;
  }

  #study {
      z-index: -1;
  }

  #studyinner {
      z-index: 0;
  }

  #studyglow {
      position: absolute;
      left: 50%;
      top: 0%;
      width: 1920px;
      margin-left: -960px;
      z-index: -2;
      animation: studyglow 5s infinite;
  }

  @keyframes studyglow {
      0% {
          opacity: 0.5;
      }

      50% {
          opacity: 1;
      }

      100% {
          opacity: 0.5;
      }
  }

  #studyglow img {
      height: auto;
      width: 100%;
  }

  #bookcaseleft,
  #bookcaseright {
      background-repeat: no-repeat;
      background-size: contain;
      height: 100%;
      width: 10vh;
      z-index: -2;
      top: 5%;
      position: absolute;
  }

  #bookcaseleft {
      background-image: url(/deltablog/assets/gerson_walls_left.png);
      left: 0em;
  }

  #bookcaseright {
      background-image: url(/deltablog/assets/gerson_walls_right.png);
      right: 0em;
  }

  #pathleft,
  #pathright {
      background-repeat: repeat;
      background-size: contain;
      top: 0em;
      width: 15vh;
      height: 100%;
      z-index: -2;
      position: absolute;
  }

  #pathleft {
      background-image: url(/deltablog/assets/gerson_wallsinner_left.png);
      left: 0em;
  }

  #pathright {
      background-image: url(/deltablog/assets/gerson_wallsinner_right.png);
      right: 0em;
  }

  /* BELOW THIS POINT IS MEDIA QUERY */

  /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

  @media only screen and (max-width: 700px) {
      #musicplayertext {
          display: none;
      }
  }