.momo-trust-display-regular {
  font-family: "Momo Trust Display", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-normal {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

body {
    background-color: #FFFD85;
    margin: 0;
    padding: 0;
}

 h1, h2, h3, footer, .highlight, .siteHeader-title {
font-family: "Momo Trust Display", sans-serif;
 }

 .articles {
  font-size: 1.1em;
  color: #0d4430;
 }


 h1,h2, h3 {
     color: #ce3e12;
     font-size:1.8em;
 }

 h2, h3 {
     padding-top:1vh;
 }
 
 .highlight {
     font-size:1.15em;
     color: #ce3e12;
 }
 
 .highlightDate {
  font-size:1.15em;
  font-family: "Momo Trust Display", sans-serif;
 }

.siteHeader {
  background: url("/HeaderImage.jpg") center center / cover no-repeat;
  background-size:cover;
  position: relative;
  width: 100%;
  height: 30vh;
  text-align: center;
  color: #ce3e12;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}


.siteHeader-content {
  position: relative;
  width: 100%;
  height: 30vh;
  text-align: center;
  color: #ce3e12;
  overflow: hidden;
  z-index:2;
}

.siteHeader-overlay {
  position: absolute;
  inset: 0;
  background-color: #0d4430;
  opacity: .65;
  z-index:1;
} 

.siteHeader-title {
  font-size: 2.8em;
  color: #FFFD85;
  padding-top: 5vh;
}

.siteHeader-description {
  color: #FFFD85;
  margin: 0.5em auto 0;
  font-family:"Roboto", sans-serif;
  font-size: 1.1em;
  font-weight:500;
}

.siteNav-wrapper {
  background-color: #ce3e12;
  text-align: center;
  padding: 1em 0;
  position: relative; 
  clear: both; 
  z-index: 2; 
}

.siteNav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.siteNav li {
  display: inline;
  margin: 0 1em;
}

.siteNav li a {
  font-family: "Momo Trust Display", sans-serif;
  font-weight: 500;
  font-size: 1.2em;
  color: #FFFD85;
  text-decoration: none;
}

.siteNav li a:hover {
  color: #f8c2ff;
}

.siteContainer {
    padding-left: 5vw;
    padding-right: 5vw;
    color: #0d4430;
    font-family:"Roboto", sans-serif;
    font-weight:600;
    font-size:1.2em;
}

.siteContainer a {
    color: #ce3e12;
    text-decoration: underline;
}
.siteContainer a:hover {
    color: #f8c2ff;
}
footer {
    text-align:center;
    justify-content: center;
    padding-top:5vh;
    padding-bottom:5vh;
    color: #0d4430;
}


/* mobile viewing*/

@media (max-width: 768px) {
  .siteHeader {
    height: 18vh;
    background-position: center top;
    justify-content: center;
  }

  .siteHeader-content {
    height: 22vh;
  }

  .siteHeader-title {
    font-size: 1.7em;       
    line-height: 1.1em;
    padding-top: 1em;
    text-align: center;
  }

  .siteHeader-description {
    font-size: 0.95em;     
    width: 90%;
    margin: 0.5em auto 0;
  }

  .siteHeader-overlay {
    opacity: 0.75;
  }

  .siteContainer {
    padding-left: 7vw;
    padding-right: 7vw;
}
}

/* special header formatting for old iphones */
@media only screen and (max-height: 667px) and (orientation:portrait) {
  .siteHeader {
    height: 25vh;
  }
}

/* header formatting for older samsung phones */
@media only screen and (min-width: 360px) and (max-height: 740px) and (orientation: portrait) {
  .siteHeader {
    height: 20vh;
  }
  .siteHeader-content {
    height: 20vh;
  }
  .siteHeader-title {
    font-size: 1.5em;
  }

}

/* mobile view landscape orientation lol*/

@media only screen and (max-width: 932px) and (orientation: landscape) {
  .siteHeader {
    height: 40vh; 
    background-position: center center;
    background-size: cover;
  }

  .siteHeader-content {
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    padding: 1em;
  }

  .siteHeader-title {
    font-size: 1.8em; 
    padding-top: 0;
    margin: 0.3em 0 0.2em;
    text-align: center;
  }

  .siteHeader-description {
    font-size: 1em;
    max-width: 85%;
    line-height: 1.3em;
    margin: 0 auto;
    text-align: center;
    display: block;
  }

  .siteHeader-overlay {
    opacity: 0.6; 
  }

  .siteNav-wrapper {
    padding: 0.5em 0;
  }

  .siteNav li a {
    font-size: 1em;
  }
}