/*
DEFAULTS
*/
html {
	/* root font size = 1rem */
	font-size: large;
	font-family: monospace;
}

/* responsiveness*/
@media (max-width: 900px) {
	html {
		font-size: medium;
	}
}

/* responsiveness*/
@media (max-width: 400px) {
	html {
		font-size: small;
	}
}

body {
	margin: auto;
	padding: 4px;
	max-width: 80ch;
	text-align: justify;
	background-color: white;
}

a:link {
	text-decoration: none;
	color: inherit;
	/*	color: #3f3f3f*/
}

a:visited {
	text-decoration: none;
	color: inherit;
	/*	color: #3f3f3f*/
}

a:hover {
	text-decoration: underline;
	color: inherit;
}

a:active {
	text-decoration: underline;
	color: inherit;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

h1 {
	text-align: center;
	margin: 1.5rem 0rem 1rem 0rem;
}

h2 {
	font-size: x-large;
	margin: 1rem 0rem 0rem 0rem;
}

h3 {
	font-size: medium;
	margin: 0.5rem 0rem 0rem 0rem;
}

ul {
	margin: 0rem;
}

p {
	margin: 0.5rem 0rem 0rem 0rem;
}

pre {
	font-family: monospace;
	text-align: start;
	background-color: #F8F8F8;
	border-radius: 0.25rem;
	border: 1px solid lightgray;
	padding: 0.5em;
	margin: 0.25rem 0rem 0rem 0rem;
	white-space: pre-wrap;
}

code {
	background-color: #F8F8F8;
	border-radius: 0.25rem;
}

footer {
	font-size: small;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-top: 2px solid gray;
	padding: 0.5rem 0rem 0.5rem 0rem;
	margin: 1rem 0rem 0rem 0rem;
}

/*
PANDOC
*/
header#title-block-header {
	border-bottom: 2px solid gray;
	margin: 1rem 0rem 1rem 0rem;
}

h1.title {
	text-align: start;
}

nav#TOC {
	margin: 1rem 0rem 1rem 0rem;
}

/*
CUSTOMIZATIONS
*/

/* -- signature */
h1.footer {
	text-align: start;
	margin: 0rem;
}

div.container {
	display: grid;
	grid-template-columns: 16ch 1fr;
	gap: 2rem;
	background-color: #F8F8F8;
	margin: 0rem -1rem 0rem -1rem;
	padding: 1rem;
}

div.icon {
	vertical-align: top;
}

div.highlights {
	vertical-align: top;
	font-size: medium;
	text-align: start;

	hr {
		width: 100%;
		margin: 2rem auto 0rem auto;
		border: 1px solid lightgray;
	}
}

img.header {
	width: 2rem;
	float: right;
	margin: 0rem 0rem 0rem 0rem;
	translate: 0rem 2.5rem;
}

/*
HOME SPECIFIC
*/
img#homeImgHeader {
	width: 75%;
	padding: 32px;
}

h2.home {
	/* no new line break */
	display: inline;
	margin: 0rem 0rem 0rem 0rem;
}

footer.home {
	font-size: small;
	display: block;
	border-top: 0px solid gray;
	padding: 0rem 0rem 0rem 0rem;
	margin: 0rem 0rem 0rem 0rem;
}

.subtitle {
	font-style: oblique;
	font-size: 1rem;
	margin: 0rem;
}

.desc {
	font-size: medium;
	margin: 0rem 0rem 0rem 0rem;
	color: gray;
}