/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*
1. https://www.internetingishard.com/html-and-css/web-typography/
2. https://practicaltypography.com/summary-of-key-rules.html
3. https://www.w3.org/Style/Examples/007/units.en.html
4. https://www.w3schools.com/css/css_text_spacing.asp
5. https://www.w3schools.com/cssref/css3_pr_text-justify.php
6. https://www.w3schools.com/css/css_max-width.asp
*/

article, figure, footer, header {
  display: block;
}

body {
  background-color: #ECECEC;
  color: black;
  font-family: Verdana;
  /*width: 90%;*/ /* Center instead. See https://prog21.dadgum.com. */
  margin: auto; /* Center */
  font-size: 20px;
  line-height: 1.45;
  text-rendering: optimizeLegibility; /* kerning */
  hyphens: auto; /* because text justified */
}

figure img {
  width: 100%;
}

figcaption {
  margin: 1em;
}

div.top {
  margin-bottom: 3em;
  background-color: #000099;
  color: #EFEFEF;
  padding: 3em;
}

div.top p {
  margin: auto;
  max-width: 720px; /* Measured in Firefox for 36em for 20px font. */
  font-size: 35px;
  font-family: Times New Roman;
  /* background-color: red; */
}

div.top p a {
  color: white;
  text-decoration-line: none;
}

article, div.article, footer p {
  display: block;
  text-align: justify; /* "top" of page (How grow pie?) should be test-align: left. */
  text-justify: inter-word;
  max-width: 720px; /* Measured in Firefox for 36em for 20px font. */
  margin: auto;
  padding-left: 6px;
  padding-right: 6px;
}

h1 {
  font-size: 24px;
  hyphens: none;
  color: #000099;
}

h2 {
  font-size: 23px;
  hyphens: none;
  color: #000099;
}

h3 {
  font-size: 22px;
  hyphens: none;
  color: #000099;
}

header, footer {
  font-size: 16px;
}

header nav, footer nav {
  padding-left: 6px;
  padding-right: 6px;
}

footer {
  margin-top: 3em;
}



/* Booktab like tables
   https://stackoverflow.com/questions/68779936/booktabs-like-tables-for-markdown
*/

table {
  border-collapse: collapse;
  border-top: 2px solid;
  border-bottom: 2px solid;
}