html { height: 100%; }

body {
  margin: 0;

  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

details summary {
  cusror: pointer;
}

#content {
  padding: 1ex;
}

footer {
  margin-top: 1em;
  padding-top: 1em; /*both because we have a border-top (below)*/
  grid-row-end: -1;
  font-size: .9em;
}
footer .stale-stamp {
  font-size: .7em;
}
footer .stale-stamp:hover,
footer .stale-stamp a { color: inherit; }

/* match margin-top of paragraphs that _usually_ start the first content of a
 * page and _usually_ give a nice buffer between header and first content */
#content > header { margin-bottom: 1em; }

#content header h1 {
  margin-top: 0;
  font-weight: lighter;
}
header, footer { text-align: center; }

h1,h2,h3,h4,h5,h6 { font-family: 'Libre Baskerville', serif; }

/*
 * TODO if some day css variables are supported everywhere (not currently
 * supported for media query arguments, then search '6\d.px' in all css files and
 * consolidate to a single variable.
 */
body { max-width: 650px; }
@media (min-width: 600px) { body { margin: 0 auto; } }
@media (min-width: 600px) { body { width: 80%; } }
@media (min-width: 640px) { body { width: 65%; } }
@media (min-width: 800px) { body { width: 50%; } }

img {
  max-width: 100%;
}

#footnotes {
  font-size: 0.8em;
  padding-top: 2em;
}

#footnotes hr {
  border: 0;
  height: 1px;
}

/* .adoc hacking
 *
 * image captions; generated by asciidoc when a caption is set per:
 * https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/#images
 */
.imageblock .title {
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
}



/* .adoc hacking
 *
 * More asciidoc hacking because I find its roles so difficult to trigger...
 */
div.imageblock.inlineimg {
  display: inline-block;
  padding: 1ex;
}

div.imageblock.inlineimg.inlineimg-small {
  max-width: 50%;
}

div.imageblock.inlineimg-left {
  /** due to float: left, we need padding for all _other_ sides */
  padding-left: 0;
  float: left;
}

div.imageblock.inlineimg-right {
  /** due to float: right, we need padding for all _other_ sides */
  padding-right: 0;
  float: right;
}

/* .adoc hacking */
div.imageblock .title {
  font-style: italic;
}

/******************************************************************************/
/* color-related things, all togeher for system light vs. dark mode mgmt ******/

/* allows dark/light mode to act correclty */
input, textarea {
  color: inherit;
  background-color: inherit;
}

body { color: #444; }
.meta { color: #808080; }
footer .stale-stamp { color: #dfdfdf; } /*closer to background */
#content header h1 { color: #585858; }
/* footer: slightly lighter than body */
#footnotes { color: #545454; }
#footnotes hr { background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
footer { border-top: 1px solid #666; }

@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
  footer { border-top-color: #aaa; }
  footer .stale-stamp { color: #aaa; } /*closer to background */
  /* footer: slightly lighter than body */
  #footnotes { color: #b6b6b6; }
  #footnotes hr { background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(137, 137, 137, 0.75), rgba(0, 0, 0, 0)); }

  a { color: #9bafff; }
  a:visited { color: #c07bff; }

  #content header h1 { color: #aeaeae; }
}