h1 {
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
    color: #003a57 !important;
  }
  h3 {
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 15.4px;
  }
  p {
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
  }
  blockquote {
    font-family: Raleway;
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
  }
  pre {
    font-family: Raleway;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px;
  }
  
  body {
      padding: 0px;
      margin: 0px;
      font-family: Raleway, sans-serif;
      overflow: hidden !important;
      background: #466368;
      background: linear-gradient(to bottom right, #fff, #fff 35%, #ddd);
  }
  
  #map {
      position: absolute;
      left: 0;
      width: 70vw;
      height: 100vh;
      z-index: 1;
  }
  
  #narration {
      position: absolute;
      width: 30vw;
      min-width: 300px;
      right: 0px;
      height: 100vh;
      overflow: hidden;
      z-index: 99;
      background: rgba(254,254,254, 1.0); /* to apply opacity background only. */
  }
  
  
  #contents {
      padding: 0%;
      width: 100%;
      margin-top: 70px; /*Adjust if Title header needs more space */
      height: 100%; /* Adjust to fit max Description length, one setting for all; alternative is 100% */
      overflow-y: scroll;
      overflow-x: hidden;
  }
  
  #contents .space-at-the-top {
      height: 30px;
      margin: 0px;
  }
  
  #contents .space-at-the-bottom {
      height: 130px;
      margin: 0px;
      text-align: center;
      padding-top: 10px;
  }
  
  #chapter {
      position: absolute;
      z-index: 999;
      margin: 10px;
      display: block;
      text-align: center;
      color: #fff;
  }
  
  #title {
      position: absolute;
      right: 0px;
      top: 0px;
      background-color: white;
      width: 30vw;
      min-width: 300px;
      z-index: 100;
      margin: 0px;
      padding: 0px;
  }
  
  h3 {
      margin-bottom: 0px;
  }
  
  .image-container {
      /* margin + padding = imageContainerMargin in script.js */
      /* Important for scrolling! */
      margin: 80px 0 0 0;
      padding: 20px 0 0 0;
      text-align: center;
  }
  
  .image-container img {
      height: auto;
      width: auto;
      max-height: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
  
      /* Three lines that center vertically */
      position: relative;
      top: 50%;
      transform: translateY(-50%);
  
  }
  
  .img-holder {
      margin: 0px;
      height: 200px;
      max-height: 200px;
      width: 100%;
  }
  
  .vid-holder {
      margin: 0px;
      height: 200px;
      max-height: 200px;
      width: 100%;
  }
  
  .title-text {
      font-weight: bold;
      text-align: center;
      margin: 10px;
  }
  
  .chapter-header {
      display: block;
      text-align: center;
      font-size: 120%;
      font-weight: bold;
  }
  
  .source {
      font-size: 9pt;
      margin: 20px;
  }
  
  .description {
      margin: 20px;
      text-align: left;
      font-size: 11pt;
      padding: 20px;
  }
  
  .inFocus {
      opacity: 1.0;
      background-color: #f0f0f0;
  }
  
  .outFocus {
      opacity: 0.3;
      background-color: white;
  }
  
  .logo-size{
    width: 90%;
  }
  
  .legend img{
    width: 70px;
    position: relative;
    top: 10px;
    left: 10px;
  }