:root {
  --background: #EEA47F;
  --body: white;
  --header: #00539C;
  --headertext: white;
  --headertexthover: black;
  --links: oklch(39% 0.18 275); /*hsl(241, 56%, 41%);*/
  --linkhover: black;
  --text: black;
}

body {
/*  font-family: "Noto Serif", serif;*/
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  font-weight: normal;
  background-color: var(--background);
  margin: 0;
  /*font-size: 16px;*/
}

header{
  background-color: var(--header);
  height: auto;
  width: 100wv;
  margin-bottom: 2em;
  position: sticky;
  top: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

}

#header-title{
  color: var(--headertext);
  font-size: 1.75em;
  font-weight: bold;
  margin: 0.5rem 1rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  align-items: center;
  width: 100%;
}

nav > a {
  margin: 0.25em 0.5em;
  font-size: 1.25em;
}

.content {
  max-width: 60rem;
  margin: 0 auto;
}

div.main {
  -moz-border-radius: 1em;
  border-radius: 1em;
  margin: 16px;
  min-height: 30em;
  padding: 16px;
  background-color: var(--body);
}

a.top, a.top:visited {
  font-weight: bold;
  color: var(--headertext);
  text-decoration: none;
}

a.top:hover {
  color: var(--headertexthover);
}

a, a:visited {
  font-weight: bold;
  color: var(--links);
}

a:visited {
  color: var(--links);
}

a:hover {
  color: var(--linkhover);
}

img {
  max-width: 80ch;
  width: 100%;
  height: auto;
}

img.bannerimage {
  max-width: 100%;
  width: 100%;
  height: auto;
}
img.thumbnail {
  max-width: 60%;
  width: 450px;
  height: auto;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
}

div.gallery > a {
  margin: 0.25em;
}

div.gallery > a > img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

details {
  margin-left: 2em;
  margin-bottom: 0.5em;
}

summary {
  color: var(--links);
  cursor: pointer;
  font-weight: bold;
  margin-left: -2em; /* Don't indent the summary */
}

summary:hover {
  color: var(--linkhover);
}

ul.document-list {
  /*list-style-type: none;*/
  /*margin-left: 0;*/
  padding-left: 2ch;
}

div.footer {
  margin: auto;
  margin-bottom: 4em;
  text-align: center;
}

@media only screen and (max-width: 550px) {
  header {
    flex-direction: column;
  }
}