@font-face {
	font-family: Chomsky;
	src: url(fonts/chomsky/Chomsky-Stripped.otf);
}

body {
	/* Credit to susam.net - some of this CSS was inspired from there */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;

	max-width: 60em;
}

header {
	text-align: center;
}

header > h1#main-title {
	font-size:4em;
	font-family:Chomsky;
	font-weight: 1;
	margin-bottom: 1rem;
}
header > h1#main-title > a {
	color: black;
	text-decoration: none;
}

header > nav {
	display: flex;

	background-color: orange;

	font-size: 1.2em;
	height: 3.2em; /* 1em gap on top and bottom */

	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 2em;
}

@media only screen and (max-device-width: 480px) { /* For smartphones, in portrait */
	body {
		padding-left: 5em;
		padding-right: 5em;
	}
	main {
		line-height: 1.5em !important;
	}	
}

header > nav > a {
	margin: auto;
	white-space: nowrap;

	background-color: #f44729;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	padding: 0.5em 1em;

	color: white;
	text-decoration: none;
	font-family: serif;
	font-weight: bold;
}

header > nav > a:active { /* Add depressed effect */
	border-right: none;
	border-bottom: none;
	border-left: 3px solid black;
	border-top: 3px solid black;
}

/* Inspired by https://swtch.com/~rsc/regexp/regexp1.html. */
main {
	font-size: 1.25em;
	font-family: serif; 
	line-height: 1.5rem; /* I use rem instead of em because it seems to be more consistent */
}

main > nav.toc /* For site-map page */ {
	margin: 1.5em 3em;

	display: flex;
	flex-direction: column;
	line-height: 1.75em;
}
main > nav.toc > p /* For the little piece of text above the page listing */ {
	margin-top: 0;
}

main aside#date-published {
	margin-top: 1em;

}

/* I have a pandoc filter that adds link icons next to headers.
 * These are hidden normally, and are shown when the header
 * is hovered on.
 */
main h1 > a,
main h2 > a,
main h3 > a,
main h4 > a,
main h5 > a,
main h6 > a {
	text-decoration: none;
	margin-right: 8px;
	display: none
}

main h1:hover a,
main h2:hover a,
main h3:hover a,
main h4:hover a,
main h5:hover a,
main h6:hover a {
	display: inline;
}

main a {
	color:#283479;
	text-decoration:underline;
}

main h4 {
	font-size: 1.05em;
	margin-top: 1em;
	margin-bottom: 0em;
}

main code {
	display: block;
	padding: 0.5em 1em;

	background-color: DarkSlateGray;
	color: ivory;
	border-radius: .25em;
	overflow-x: scroll;
	white-space: pre;
}

main img {
	height: 16em;
	width: auto;
}

main img.big-image {
	max-width: 100%;
	height: auto;
}

main img.mid-small-image {
	height: 10em; 
}

main img.small-image {
	height: 2em; 
}

main img.vertical-image {
	height: auto;
	width: 20em;
}

main li > p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;	
}

main kbd {
	white-space: pre; /* Prevent wrapping */
}

main > figure {
	margin-left: 0;
}

main > figure > figcaption {
	color: #575757;
}

section.footnotes a {
	word-break: break-all;
}

footer {
	font-family: serif;
	font-size: 1.25em;
	text-align: center;

	margin-top: 2em;
	margin-bottom: 4em;
}

footer > nav {
	display: flex;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 1em;

	justify-content: space-between; /* Centers the flex items within the container */
}

footer > nav > a {
	margin: auto;
	border-right: 1px solid black;

	flex: 1 1 auto; /* Centers the flex items within their space */
}



footer > nav > a:last-child {
	margin-left: auto;
	margin-right: 0;

	border-right: 0px;
}