/* Global reset. From:
https://github.com/Lazzzer00/Best-CSS-Reset-2024/blob/main/css_reset.css
https://gist.github.com/jackdomleo7/55659bafe581d19cc341ef775d6a9e6b
https://medium.com/@aleksej.gudkov/scss-reset-the-essential-guide-to-styling-from-scratch-54503b24337e
*/
*, *::before, *::after {
  box-sizing: border-box; }

* {
  margin: 0;
  padding: 0; }

ul[role='list'], ol[role='list'] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover; }

input, button, textarea, select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none; } }

body, html {
  height: 100%;
  scroll-behavior: smooth;
  font-family: "times new roman", times, serif; }

/**/
/******* site wide *******/
body {
  --logo-width: 484px;
  --logo-height: 150px;
  --logo-aspect: calc(484/150);
  --min-site-width: 250px;
  --max-site-width: 968px;
  background-color: gainsboro; }

#sitewrap {
  min-width: var(--min-site-width);
  max-width: var(--max-site-width);
  margin-left: auto;
  margin-right: auto;
  --default-font-size: clamp(15px, 10px + 1.0331vw , 20px);
  font-size: var(--default-font-size);
  background-color: #d9ffff; }

/****** header ******/
#banner {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "logo newsflash" "logo search"; }

#logo {
  grid-area: logo; }

#newsflash {
  grid-area: newsflash; }

#search {
  grid-area: search; }

#newsflash {
  display: inline-grid;
  align-items: center;
  justify-content: center; }

#newsflash p {
  font-size: 1em;
  font-weight: bold; }

#search {
  display: inline-grid;
  align-items: center;
  justify-content: center; }

#mainmenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding-bottom: 1em; }

#mainmenu .menuitem {
  padding-left: .5em;
  padding-right: .5em;
  text-align: center;
  text-justify: center;
  text-decoration: none; }

/******** media query for header *******/
/* Note: max-width: is --logo-width    */
@media only screen and (max-width: 484px) {
  #banner {
    display: grid;
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "newsflash" "search"; }
  #newsflash p {
    padding-bottom: .5em; }
  #search p {
    padding-bottom: .5em; } }

/***** page content *****/
#pagetitle {
  padding-left: 2em; }

#breadcrumbs {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding-top: 0.25em;
  padding-bottom: 0.25em; }

#breadcrumbs ul {
  list-style-type: none;
  padding-left: 2em; }

#breadcrumbs li {
  font-size: 0.8em;
  text-align: center;
  text-decoration: none; }

#relatedlink {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.5em;
  text-align: left;
  text-justify: left; }

#contentimage figure {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
  text-align: center;
  text-justify: center;
  text-decoration: none; }

#contenttext {
  padding-left: 2em;
  padding-right: 2em;
  text-align: left;
  text-justify: left;
  text-decoration: none; }

#contenttext p {
  padding-bottom: 0.5em; }

#contenttext ul {
  padding-left: 1em;
  padding-bottom: 0.5em; }

#contenttext li {
  padding-left: 0.5em; }

#relatedfragment {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0em;
  text-align: left;
  text-justify: left; }

#paginate {
  clear: both;
  padding-top: 0.25em;
  padding-bottom: 0.75em; }

#paginate ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  list-style-type: none;
  padding-left: 2em; }

#paginate li {
  font-size: 1em;
  padding-right: 1em;
  text-align: center;
  text-decoration: none; }

/******** media query for content *******/
/* Note: max-width: is set by asthetics */
@media only screen and (max-width: 640px) {
  #contentwrap {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  #contentimage {
    text-align: center;
    text-justify: center;
    text-decoration: none; }
  #contentimage figure {
    float: none !important; } }

/***** Page Footer *****/
footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 1em; }

footer {
  clear: both;
  padding-left: .5em;
  padding-right: .5em;
  text-align: center;
  text-justify: center;
  text-decoration: none; }