body {
	margin: 2em auto;
	max-width: 60ch;
	padding: 0 .62em;
	font: 1.2em/1.62 lato, sans-serif;
	text-align: justify;
}

h1,
h2,
h3 {
	line-height: 1.2;
	text-align: left;
	margin: 0.5em 0em;
}

a {
	text-decoration: none;
	/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.noir {
	color: black;
}

img{
	display: block;
	margin: 1em auto;
	max-width: 80%;
	min-width: 40%;
}

.footnotes {
	text-align: left;
}

.nav {
	padding: 0em 0.5em;
	color: white;
}

nav {
	background-color: grey;
	color: white;
	padding: 0.5em;
}

.top {
	padding: 0.5em;
	margin: 0em;
}

#top {
	background-color: #EEEEEE;
}

main {
	padding: 0.5em 1em;
}

footer {
	padding: 0em 1em;
}

@media screen and (max-width: 30em) {
	body{
		text-align: left;
	}
}

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
}

.smallcaps {
	font-variant: small-caps;
}

smallcaps {
	font-variant: small-caps;
}