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

body {
  max-width: 730px;
  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(2vw, 10pt);
    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,h4 {
  text-align: center;
  margin-top: 1.25em; margin-bottom: 1em;
}
h4 {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.25em;
 }

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

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

/* A <ul> should not initiate a new paragraph. */
p:has(+ul) { margin-bottom: 0 }

ul         { list-style-type: square; margin-bottom: 0.4em }
ul ul      { list-style-type: circle; margin-top: 0.2em; }
p ~ ul     { list-style-type: disc;   margin-top: 0.4em; }

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

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

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

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

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; }