:root
{
	--main-bkg: #ffffff;
	--dark-bkg: #222222;
	--dark-frg: #444444;
	--muted: #808080;
	--light-bkg: #eeeeee;
	--light-frg: #bbbbbb;
	--extreme: #000000;
	
	--danger-bkg: #F8D7DA;
	--danger-frg: #721C24;
	--info-bkg: #D1ECF1;
	--info-frg: #0C5460;
	--success-bkg: #D4EDDA;
	--success-frg: #155724;
}
@media (prefers-color-scheme: dark)
{
	:root
	{
		--main-bkg: #111111;
		--dark-bkg: #eeeeee;
		--dark-frg: #bbbbbb;
		--light-bkg: #222222;
		--light-frg: #444444;
		--extreme: #ffffff;
		
		--danger-bkg: #721C24;
		--danger-frg: #F8D7DA;
		--info-bkg: #0C5460;
		--info-frg: #D1ECF1;
		--success-bkg: #155724;
		--success-frg: #D4EDDA;
	}
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 12px; margin: 0; padding: 0; }
body
{
	background: #ffffff;
	background-color: var(--main-bkg);
	color: #444444;
	color: var(--dark-frg);
	display: flex;
	flex-direction: column;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.2rem;
	height: 100%;
	line-height: 2;
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

/* For accessibility */

#skip-to-main { background: white; border-radius: 2px; color: black; left: 0; line-height: 1; margin: -1000px -1000px 0 0; padding: 0.5rem; position: absolute; top: 0; }
#skip-to-main:focus { margin-left: 4px; margin-top: 4px; white-space: nowrap; z-index: 999999; }

:target { scroll-margin-top: 5rem; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: Raleway, sans-serif; font-weight: bold; margin: 1em 0 1ex; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

/* Quotes */
blockquote { margin: 1rem; padding-left: 2.5rem; }

/* Code and other preformatted text */
code, pre, tt { font-family: monospace; }
code
{
	background: #eeeeee;
	background-color: var(--light-bkg);
	border: 1px solid #808080;
	border-color: var(--muted);
	color: #444444;
	color: var(--dark-frg);
	display: block;
	line-height: 1.25;
	margin: 1rem 0;
	padding: 1rem;
}
tt
{
	color: #000000;
	color: var(--extreme);
}
a tt
{
	color: unset;
}

/* Definition lists */
dl { margin: 1rem 0; }
dt { font-weight: bold; }
dd { padding-left: 1rem; margin-bottom: 1rem; }

/* Tables */
.tbl-basic { border-collapse: collapse; color: #444444; color: var(--dark-frg); font-size: 100%; margin: 1em 0; text-align: left; }
.tbl-basic th, .tbl-basic td { border: 1px solid #bbbbbb; border-color: var(--light-frg); padding: 0.2em 0.5em; }
.tbl-basic th { background: var(--light-bkg); }
.tbl-basic .num { text-align: right; }

/* Form controls */
.form-control { background: #eeeeee; background-color: var(--light-bkg); border-radius: 0.25rem; border: 1px solid #bbbbbb; border-color: var(--light-frg); color: #444444; color: var(--dark-frg); font-family: inherit; }
button.form-control:focus, input.form-control:focus, textarea.form-control:focus { box-shadow: 0 0 2px 2px rgba(15, 122, 252, 0.5); outline: none; }
.buttons { display: flex; flex-direction: row; gap: 1rem; }
.btn { cursor: pointer; padding: 1ex 1em; text-transform: uppercase; transition: all 0.25s linear; }
.btn-primary { background: #222222; background-color: var(--dark-bkg); border-color: transparent; color: #bbbbbb; color: var(--light-frg); }
.btn-primary:hover { color: #eeeeee; color: var(--light-bkg); text-shadow: 0 0 2px #bbbbbb; text-shadow: 0 0 2px var(--light-frg); }
input[type=email], input[type=text], input[type=password], input[type=search], input[type=url] { line-height: 3; padding: 0 1ex; }
textarea { padding: 1ex; }

/* Popup/dialog boxes */
.btn-close { background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--dark-frg); height: 2rem; min-width: 2rem; padding: 0; transition: border-color 0.5s ease; }
.btn-close:hover { border-color: var(--light-frg); }
.popup-container { background: rgba(0,0,0,0.75); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 5; }
.popup-dialog { background: var(--light-bkg); border-radius: 1rem; box-shadow: 0 1em 2em black; color: var(--dark-frg); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.popup-header { align-items: center; border-bottom: 1px solid var(--light-frg); display: flex; flex-direction: row; justify-content: space-between; padding: 0.5rem 1rem; }
.popup-title { margin: 0; line-height: 2; }
.popup-footer { align-items: center; border-top: 1px solid var(--light-frg); display: flex; flex-direction: row; justify-content: flex-end; padding: 0.5rem 1rem; }

/* Scaffolding */
.pillar { box-sizing: border-box; margin: 0 auto; max-width: 1024px; padding: 0 2rem;}
.wrapper { display: flex; flex-wrap: wrap; }
header .wrapper, footer .wrapper { padding: 0 1rem; }
footer { background: var(--light-bkg); }

/* Generic messages */
.alert { background: var(--dark-bkg); border: 1px solid var(--dark-frg); border-radius: 1rem; color: var(--light-frg); line-height: 1.5; margin: 1rem 0; padding: 1rem; }
.alert-danger { background-color: var(--danger-bkg); border-color: var(--danger-frg); color: var(--danger-frg); }
.alert-info { background-color: var(--info-bkg); border-color: var(--info-frg); color: var(--info-frg); }
.alert-success { background-color: var(--success-bkg); border-color: var(--success-frg); color: var(--success-frg); }

/* Site header */
#site-header { background: #eeeeee; background-color: var(--light-bkg); box-shadow: 0 4px 16px 8px rgba(0,0,0,0.1); height: 3rem; position: fixed; top: 0; width: 100%; z-index: 2; }
#site-header .social { display: none; }
#site-content { border-top: 1px solid transparent; flex-grow: 1; margin-top: calc(3rem - 1px); }

/* HTTP warning */
#http-warning { background: var(--danger-bkg); color: var(--danger-frg); font-size: 0.8rem; text-align: center; }
#http-warning a { color: inherit; }

/* Main navigation */
header nav, footer nav { display: flex; flex-direction: row; font-size: 1rem; justify-content: space-between; line-height: 1rem; position: relative; }
nav ul { display: flex; }
nav li { display: block; position: relative; }
#main-menu { background: #eeeeee; background-color: var(--light-bkg); display: none; flex-direction: column; left: 0; position: absolute; right: 0; top: 100%; }
.active + #main-menu { display: flex; }
header nav a, footer nav a { color: #444444; color: var(--dark-frg); padding: 1rem; text-decoration: none; }
header nav a { display: block; }
footer nav a { display: inline-block; }
header nav a:hover, footer nav a:hover, header nav a.active { background: #222222; background-color: var(--dark-bkg); color: #bbbbbb; color: var(--light-frg); }
.dropdown.menu { background: #eeeeee; background-color: var(--light-bkg); box-shadow: 4px 4px 16px rgba(0,0,0,0.1); color: #444444; color: var(--dark-frg); display: none; flex-direction: column; position: absolute; top: 100%; white-space: nowrap; z-index: 1; }
.dropdown a { display: flex; flex: 1 0 auto; }
.dropdown li { background: #eeeeee; background-color: var(--light-bkg); display: flex; flex-basis: auto; }
.dropdown .dropdown { left: 100%; top: 0; }

/* Main page content */
main { background: var(--main-bkg); }
main article { text-align: justify; }
main a { color: #0F7AFC; border-bottom: 1px solid; border-bottom-color: rgba(15, 122, 252, 0.4); text-decoration: none; }
main a.icon-link { border-bottom: none; }
main p { margin: 1rem 0; }
main ol, main ul { padding-left: 2rem; }

/* Content header (jumbotron) */
main > header { background-position: center center; background-size: cover; box-shadow: 0 4px 16px 8px rgba(0,0,0,0.1); display: flex; min-height: 30vh; padding: 0 2rem; position: relative; }
main > header::before { background: rgba(0,0,0,0.5); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }
main > header h1 { align-self: flex-end; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.25); text-align: center; z-index: 1; }
main h1 { text-transform: uppercase; }

/* Search form */
#search-form { background: var(--light-bkg); box-shadow: 4px 4px 16px rgba(0,0,0,0.1); display: none; flex-wrap: nowrap; left: 50%; padding: 1ex; position: absolute; top: 100%; transform: translateX(-50%); }
#search-form input { line-height: 2; margin-right: 1ex; }
.active + #search-form { display: flex; }

/* Home page */
.loop article { display: flex; }
.loop .excerpt { font-size: 1rem; padding: 1rem 0; }
.loop .post-meta { color: #808080; color: var(--muted); display: none; font-size: 0.8rem; }
.loop .thumbnail { flex: 0 0 64px; height: 64px; margin: 1rem 1rem 0 0; width: 64px; }
.loop .post-title { font-family: Raleway, sans-serif; font-size: 1.5rem; font-weight: bold; }
.loop .excerpt:nth-child(n+2) { border-top: 1px solid var(--light-frg); }
.loop .summary p { margin-top: 0; }

/* Extra stuff */
.post-extra { display: flex; flex-direction: row; }

/* Tags */
.tags-container { flex: 1 1 auto; }
.tag-list { display: block; padding-left: 0; }
.tag-list-item { display: inline-block; white-space: nowrap; }
.tag-list-item:nth-child(n+2)::before { content: ', '; }

/* Sharing links */
.share { flex: 0 0 auto; }

/* Pingbacks */
.pingback-list { font-size: 1rem; }
.pingback-time { color: var(--muted); }
.pingback-title::before { content: "- \201C"; }
.pingback-title::after { content: "\201D"; }

/* Comments */
#comments { margin-top: 1rem; }
.comment { border-top: 1px solid var(--light-frg); display: flex; font-size: 1rem; padding-top: 1rem; }
.comment .gravatar { height: 48px; margin-right: 1rem; width: 48px; }
.commenter-name { font-size: 1.2rem; font-weight: bold; }
.comment-time { color: #808080; color: var(--muted); font-size: 0.8rem; }

#comment-form { flex-wrap: wrap; width: 100%; }
.form-group { display: flex; flex: 0 0 100%; flex-wrap: wrap; margin-bottom: 1rem; }
.form-group label { flex: 0 0 175px; overflow: hidden; white-space: nowrap; }
.form-group input { flex: 1 0 360px; }
.form-group textarea { flex: 1 0 360px; }

/* Pagination links */
.pagination { border-top: 1px solid var(--light-frg); display: flex; flex-direction: row; justify-content: space-between; }
.pagination a { border-bottom: none !important; padding: 1rem; }

aside {  background: var(--light-bkg); flex: 1 0 20rem; }

/* Site footer */
#site-footer { height: 3rem; margin-top: 1rem; }
footer .copyright { display: inline-block; padding: 1rem; }

@media (min-width: 768px)
{
	html { font-size: 16px; }
	dd { padding-left: 4rem; }
	#main-menu-toggle { display: none; }
	#main-menu { display: flex; flex-direction: row; max-height: 3rem; position: static; }
	nav li { display: inline-block; }
	header nav a { display: inline-block; }
	:hover > .dropdown.menu { display: flex; flex-wrap: wrap; max-height: 80vh; }
	#site-header .social { display: flex; }
	.loop .thumbnail { flex-basis: 128px; height: 128px; width: 128px; }
	.comment .gravatar { height: 72px; margin-right: 1rem; width: 72px; }
	.form-group { flex-wrap: nowrap; }
}
@media (min-width: 540px)
{
	.controls::before { content: ''; flex: 0 0 175px; }
}