@charset "utf-8";

/* Global constants */
:root
{
	--dark-bg-color: #2A2A2A;
	--bright-text-color: #E2ECF0;
	--bright-accent-text-color: #DC282D;

	--bright-bg-color: #FEFEFF;
	--slightly-darker-bright-bg-color: #F6F6F9;
	--dark-text-color: #404040;
}

body, html
{
	background-color: var(--dark-bg-color);
	margin: 0 auto;
	height: auto;
	font-family: 'Helvetica', sans-serif;
	tab-size: 4;
	line-height: 1.7em;
}

.content-width
{
	width: 100%;
	max-width: 55em;
	margin: 0 auto;
	padding: 0;
}

.content-padding
{
	padding-left: 1em;
	padding-right: 1em;
}

img
{
	max-width: 100%;
}

a
{
	text-decoration: none;
	color: inherit;
}

a:hover
{
}

a:visited
{
	color: inherit;
	text-decoration: none;
}



/* Top of page, top.html */

#page-top
{

}

#page-top-banner-box
{
	margin: 0 auto;
	margin-top: 3em;
	margin-bottom: 1.5em;
}

#page-top-navigation-box
{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	margin-top: 0em;
	margin-bottom: 2em;
}

.page-top-navigation-item
{
	color: var(--bright-text-color);
	font-size: 1.5em;
	font-weight: 600;
	margin-left: 0.6em;
	margin-right: 0.6em;
	text-decoration: none;
}

.page-top-navigation-item:hover
{
	color: var(--bright-accent-text-color);
}

.page-top-navigation-item:visited
{
	color: var(--bright-text-color);
}

.page-top-navigation-item:visited:hover
{
	color: var(--bright-accent-text-color);
}



/* Middle of page, content */

#page-middle
{
	background-color: var(--bright-bg-color);
}

#page-middle-content
{
	padding-top: 3em;
	padding-bottom: 3em;
}

#page-middle-post-header
{

}

#page-middle-post-title
{
	text-align: center;
	color: var(--dark-text-color);
	font-size: 3em;
	font-weight: 700;
	margin-bottom: 0em;
	line-height: 1.2em;
}

#page-middle-post-subtitle
{
	text-align: center;
	color: var(--dark-text-color);
	font-size: 1.5em;
	margin-top: 0.6em;
	margin-bottom: 0em;
}

#page-middle-post-subtitle-date
{
	text-align: center;
	color: var(--dark-text-color);
	font-size: 1.2em;
	margin-top: 0.8em;
	margin-bottom: 0em;
}

.page-middle-post-navigation-top
{
	color: var(--dark-text-color);
	font-size: 1.2em;
	font-weight: 600;
	margin-top: 0em;
	margin-bottom: 2em;
	overflow: auto; /* Clearfix hack */
}

.page-middle-post-navigation-bottom
{
	color: var(--dark-text-color);
	font-size: 1.2em;
	font-weight: 600;
	margin-top: 2em;
	overflow: auto; /* Clearfix hack */
}

.page-middle-post-navigation-previous
{
	float: left;
	color: var(--bright-accent-text-color);
}

.page-middle-post-navigation-next
{
	float: right;
	color: var(--bright-accent-text-color);
}

/* Bottom of page, bottom.html */

#page-bottom
{
	/*color: var(--bright-text-color);*/
	color: var(--bright-accent-text-color);
	padding-top: 2em;
	padding-bottom: 2em;
}

#page-bottom-footer
{
	white-space: nowrap;
	overflow-x: auto;
}

#page-bottom-right-align
{
	float: right;
}

#page-bottom-footer-text
{
	font-size: 1.65em;
	font-weight: 600;
	display: inline-block;
}

.page-bottom-logo-icon
{
	font-size: 1.65em;
	display: inline-block;
	margin-left: 0.3em;
}

.page-bottom-logo-icon > img {
	height: 1em;
}

/* Markdeep overrides */

.md a {
	font-family: 'Helvetica', sans-serif;
}

.md ul {
	line-height: 2.2em;
}

.md pre.listing.backtick, pre.listing.tilde
{
	background-color: var(--slightly-darker-bright-bg-color);
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1.5em;
	width: 95.5%;
}

.md code
{
	line-height: 2em;
	color: var(--bright-accent-text-color);
}

.line
{
	color: var(--dark-text-color);
}

.md pre.tilde {
	margin-top: 2em;
	margin-bottom: 2em;
}

.md h1, h2, h3, h4, h5, h6
{
	margin-top: 0em;
	padding-top: 0em;
}
