/* copyright © Dean Robert Edridge, 2024-11-06 - You are welcome to copy fragments, but not the whole stylesheet */

:root {
  /* layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
  min-height: 100%; /* a few people have suggested this, although they often suggest "height", rather than "min-height" */
  
  /* declare variables on the root element */
  --background-color: #d1e4dd;
  --text-color: black;
  --text-link-color: #00bcdd;
  
  /* set the default background and text colors using the relevant predeclared variables */
  background-color: var(--background-color);
  color: var(--text-color);
  
  /* "1em" isn't quite big enough for some devices */
  /*font-size: 1.111em; not too big, not too small */
  line-height: 1.5;
  text-align: center;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html > body {
    margin: 0;
    top:0;
    bottom:0;
}

body {
  position: relative;
  flex-grow: 1;
  min-height: 100vh;
  width: auto;
}

p {
  position: relative;
  font-size: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 38rem;
  padding: 0.5rem;
}

h1 {
  font-size: 4rem;
  color: var(--text-link-color);
  margin: 1.125rem;
}

h2 {
  font-size: 2.25rem;
  margin: 0.65rem;
}

h2 > small {
    font-size: 1rem;
}

a {text-decoration: none}

hr { width: 16em; width: 16rem; height:.09em; height:.09rem; background-color: #585858; margin: auto}

footer {text-align: center;margin-left: auto; margin-right: auto; margin-bottom: .5em; margin-bottom: .5rem}

small { text-align: center; margin-left: auto; margin-right: auto; font-size: .75em; font-size: .75rem}

a:visited {
  color: var(--text-link-color)
}

a:link {
  color: var(--text-link-color);
}

a:hover {
  color: gray;
  border-bottom: dotted 0.18em
}

h1 > a {
  color: var(--text-link-color);
}

h1 > a:hover {
  color: gray;
}

a:active {
  color: green
}

a:visited {
  color: var(--text-link-color)
}

a:visited:hover {
  color: gray
}

div.video-wrapper {margin:auto;  text-align: center;
max-width: 100% /* used to center the video */}

blockquote{margin: auto; padding:0; padding-left: 1.75em; border-left: .5em solid darkgray;
max-width: 29em; max-width: 29rem; height: auto}

blockquote::before, blockquote::after {
position: relative;

/*Font*/
font-family: Georgia, serif;
font-size: 5.8em;
font-weight: bold;
color: #999;
}

blockquote :first-child {display:inline; margin-top: 0}
blockquote :nth-child(2) {padding-top: 0; margin-top: 0}
blockquote :last-child {margin-bottom:0}

blockquote h2 {margin: 0; padding: 0}

blockquote::before {
content: "\201C";

/* Positioning */
left:0;
top:0;
}

blockquote::after {
content: "\201D";

/* Positioning */
right:0;
bottom:0;
}

iframe {
  margin: 0.25rem auto;
  border: 0.125rem solid lightgray;
  max-width: 98vw;
}

* {
  scrollbar-width: auto !important;
  scrollbar-color: gray lightgray;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #d1e4dd;
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #002D62;
    --text-color: lightgray;
  }
}

figure, figcaption, img {
    border: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

figure img {
    border-radius: 0.85em;
    height: 17rem;
    display: block;
    margin: 1.7em auto 1.7em auto;
    border: 0.35rem lightgray solid;
    max-width: 98vw;
}

figure {
    border: 0.175em gray solid;
    border-radius: 1em;
    margin: 1em auto 1em auto;
    max-width: 90vw;
}

figcaption {
    padding: 0.75em;
}

footer {
    margin: 1rem;
}