/* other bg options: Linen, Cornsilk, Lightcyan */

body {
  max-width: 732px;
  margin: auto;
  padding: 4px 8px 10px;
  font-family: "DejaVu Serif", serif;
  font-size: 11pt;
  background-color: SeaShell;
}

/* better for screens in portrait mode */
/* slight change in bg color to signal when it is in play */
/* was: #f2f2f2 (light gray); now white */

@media screen and (orientation: portrait) {
  body {
    max-width: 100vw;
    font-size: max(2.2vw, 11pt);
    background-color: white;
  }
}

footer { text-align: right; font-size: 90% }

/* -------------------------------------------- */

a:link    { color: blue }
a:visited { color: firebrick }
/* a:hover { font-weight: bold } */

/* -------------------------------------------- */
h2,h3 {
  text-align: center;
  margin-top: 1.25em;
  margin-bottom: 1em;
}
h4 {
  text-align: left;
  margin-top: 1.25em;
  margin-bottom: 0.25em;
  font-weight: bold;
 }

/* -------------------------------------------- */
p { margin: auto; margin-bottom: 1em }
p.center { text-align: center }
p.quote  { font-style: italic }

ul { list-style-type: square }
ul, ol { line-height: 1.2em; margin-bottom: 1em }
ul ul { list-style-type: circle }
ul ul, ol ol { margin-top: 0.2em }

/*
  For creating a <div> block of text formatted as a 
  single paragraph with one or more embedded lists.
  The ul list-style-type change shows it is in effect.
*/
.p-with-li { margin: auto; margin-bottom: 1em }
.p-with-li > ul { list-style-type: disc }
.p-with-li > ul, .p-with-li > ol {
  margin-top: 0.3em; margin-bottom: 0.3em
}
.p-with-li ul ul, .p-with-li ol ol { margin-bottom: 0.2em }

/* A similar block in which the list items are paragraphs. */
.p-with-p { margin: auto; margin-bottom: 1em }
.p-with-p ul { list-style: none inside; padding-left: 2em }
.p-with-p li { margin-bottom: 0.8em }
.p-with-p li::before {
   content: "*";
   padding-left: 0.6em; padding-right: 0.3em;
}

/* Each final paragraph is followed by an <hr>. */
p:has(+hr) { margin-bottom: 0.75em }

/* For icons that occur within text */
img[src$="svg"] { height: 0.8em }

span.new {
  border-radius: 0.4em;
  padding: 0 0.5em; outline: 0.1em solid blue;
  background: #ffffb3; color: #4d0000;
  font-style: italic; font-size: 0.85em
}

/* -------------------------------------------- */
div.gallery { 
  max-width: 732px;
  display: flex; flex-wrap: wrap;
  place-content: center;
  margin: auto;
  margin-top: 0.4em;
  margin-bottom: 1em;
}

/* p + div.gallery { margin-top: 0.25em } */
p:has(+div.gallery) { margin-bottom: 0.25em }

/* for captions */
div.gallery p {
  text-align: center;
  font-style: italic;
  margin-bottom: 0
}

div.gallery a img {
  margin: 0px 2px;
  outline: thin solid blue;
}

div.gallery a:visited img { outline-color: firebrick; }
div.gallery a:hover img   { outline: 2px solid blue; }