html {
  /* layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
  min-height: 100%;
  
  /* declare variables on the root (html) element */
  --background-color: white;
  --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 */
  font-size: 1.2em;
  line-height: 1.5;
}

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

body {
  position: relative;
  text-align: center;
  flex-grow: 1;
  min-height: 100vh;
  text-align: center;
  display: flex;
  align-items: center; /* align items vertically */
  justify-content: center; /* align items horizontally */
  flex-direction: column
}

p {
  max-width: 38rem;
  margin: 1rem;
  font-size: 1rem;
  text-align: center
}

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

h2 {
  font-size: 1.65rem;
  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
}

iframe {
  margin: 0.25rem auto;
  border: 0.125rem solid lightgray;
  max-width: calc(100vw - 0.425rem);
}

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

@media (prefers-color-scheme: light) {
  html {
    --background-color: white;
    --text-color: black;
  }
}

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

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

figure img {
    margin-bottom: 1em;
    height: 18rem;
    display: block;
    margin: 1.7em auto 1.7em auto;
    border: 0.35rem lightgray solid;
}

figure img{
    border-radius: 0.85em;
    /* box-shadow: 5px 10px 5px darkgray; */
}

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

figcaption {
    padding: 0.75em;
}

footer {
    margin: 1rem;
}