a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

body {
   font-family: georgia, serif;
}

h1 {
  font-size: 2.25em;
  /* To consider:
  font-family: Arial, Helvetica, sans-serif; */
}

h2 {
  font-size: 1.75em;
  /* To consider:
  font-family: Arial, Helvetica, sans-serif; */
}

h3 {
  /* To consider:
  font-family: Arial, Helvetica, sans-serif; */
}

p {
  line-height: 1.5;
}


/* On screen center the text in a little white box over agreen background.
 * This requires two @media sections to handle narrow and wide screens.  In
 * contrst, printing will just uses the default page layout.
 */
@media screen {
  body {
    background: #BBDFB5;
  }

  #page-contents {
    background: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    margin-bottom: 5em;
    padding-top: 0.1em;  /* Avoid collapsing margins. */
    padding-bottom: 2em;
    border-radius: 1em;
  }
}

/* Do a nice margin around the main contents when the screen is big */
@media screen and (min-width: 50em) {
  #page-contents {
    padding-left: 4em;
    padding-right: 4em;
    width: 40em;
  }
}