body {
  margin: 0;
  background-color: #F0E8D4;
  font-family: 'Tahoma', 'Roboto', sans-serif;
}

#container {
  background-color: white;
  min-height: 100vh;
  max-width: 800px;
  margin: 0px auto 0px auto;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 0.2);

}

header {
  padding: 0;
  border-bottom: 2px outset #90A1B9;
  text-align: center;
}

.banner {
  font-size: 17px;
  background: #62748E;
  padding: 10px;
}

@font-face {
  font-family: 'Gelasio';
  src: url('/assets/fonts/Gelasio-VariableFont_wght.ttf') format('truetype');
}

.banner-ref {
  color: white;
  font-family: 'Gelasio', 'Georgia', serif;
  text-decoration: none;
}

main {
  padding: 0 45px 30px 45px;
}

@media (max-width: 600px) {
  main {
    padding: 0 10px 30px 10px;
  }

  .banner {
    font-size: 2.8vw;
  }
}

#loading {
  margin: auto;
  display: grid;
}

#content {
  margin: 0;
}

#content li > ol > li {
  list-style: lower-roman;
}

#content li > ol > li > ol > li {
  list-style: lower-latin;
}

#content img {
  display: flex;
  margin: auto;
  max-width: 100%;
}

blockquote {
  color: gray;
  margin-left: 0;
  padding-left: 16px;
  border-left: 4px solid darkgray;
}

#end {
  text-align: center;
}

footer {
  background-color: rgb(40 40 40);
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 2px inset rgb(40 40 40);
  text-align: center;
}

.compact {
  margin: 3px 0;
  line-height: 1.0;
}

[data-footnote-ref]::before {
  content: '[';
}

[data-footnote-ref]::after {
  content: ']';
}

.footnotes {
  font-size: 12px; 
}

.footnotes ol {
  padding-left: 20px;
}

a:not(.banner-ref) {
  color: #1E7EC8;
  text-decoration: none;
}

a:not(.banner-ref):hover {
  text-decoration: underline;
}