html, body {
  background-color: #f9f7ff;
  padding: 0;
  margin: 0;
  font-family: 'Libre Baskerville', serif;
}

nav{
  background-color: #DCE9DD;
  text-align: center;
  padding: 10px
}

nav ul { /*style options for unordered html list for menu*/
  list-style-type: none;
  /*margin: 0;
  padding:0;
  overflow:hidden;*/
}

nav ul li { /*style for items in above list*/
  /*float: left; float on same line*/
  display: inline-block; /*in 1 horizontal line*/
  padding: 14px 16px; /*space around words*/
}

nav a { /*style of each link*/
  color: #45503B;
  text-decoration: none; /*remove underline from link*/
}

nav a:hover{ /*changes color when mouse hovers over word*/
  color: #6E0280;
}

main{
  max-width: 800px; /*limiting text width*/
  margin: 0 auto; /*centered*/
  padding: 0 20px; /*padding on sides*/
}

h1, h3 {
  text-align: center; 
  margin-top: 20px;
  margin-bottom: 20 px;
  font-family: 'Libre Baskerville', serif;
  color: black;
}

h2{
  color: #45503B; 
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: 'Libre Baskerville', serif;
}

p{
  font-family: Georgia, serif; 
  color: black;
  font-size:125%;
  line-height: 1.5;
  text-align: justify; /*justify: text in a paragraph (or block) is stretched so that both the left and right edges line up evenly*/
}

main img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

body > img {
  margin: 0 auto;
  display: block;
  max-width: 1200px;  /* but no wider than 1200px */
  border-radius: 4px; /* optional slight rounding */
}

.caption{
  text-align:center;
  color: grey; 
  font-size:15px;
}

/*.card{
  display: flex; /*will make text on right of image*/
  /*padding: 24 px;
  boxshadow: 0 0 24px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  border-radius: 8px;
  text-decoration: none;
  background: #fafafa;
  transition:  background 0.25s;
}

.card hover{
  background: #e6d7ff
}

.card image{
  width: 80px;
}*/

canvas{
  display: block;
  margin: 0 auto;
}