html, body { margin: 0; padding: 0; }

html {
	font-size: 1em;
	line-height: 1.4;
}
body {
	font-family: sans-serif;
}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
     ::selection { background: #b3d4fc; text-shadow: none; }

.hidden {
	display: none !important;
	visibility: hidden;
}

a abbr { border-bottom: none; }

#avatar {
	display: block;
	border-radius: 5em;
	overflow: hidden;
	width: 10em;
	height: 10em;
	margin: .5em auto;
	margin-bottom: 1em;
}
#index article { position: relative; }
@media screen and (min-width: 60em) {
	#avatar {
		position: absolute;
		right: -16em;
		top: -5em;
		margin: 0;
		width: 13em;
		height: 13em;
		border-radius: 6.5em;
	}
}
	#avatar img {
		display: inline;
		height: 100%;
	}

.articles {
	list-style-type: none;
	padding: 0;
}
	.article { position: relative; }
	.article h3, .site h3, .blog-post h3 {
		margin-bottom: 0;
		font-weight: normal;
		font-size: 125%;
		line-height: 2;
		color: black;
	}
@media screen and (min-width: 50em) {
	.blog-post h3 {
		margin-top: 3em;
	}
	.blog-post h3:not(:first-child) {
		margin-top: 3em;
		border-top: 2px dashed #ddd;
		padding-top: 2em;
		font-size: 110%;
	}
}
	.blog-post h4 {
		font-weight: bold;
		font-size: 100%;
		line-height: 2;
		color: black;
		margin-top: 2em;
		margin-bottom: -.5em;
	}
		.article h3 { font-size: 115%; }
		.article h3 a, .site h3 a, .blog-post h3 a {
			color: inherit;
			text-decoration: none;
			border: none;
		}
			.article h3 a:hover, .site h3 a:hover, .blog-post h3 a:hover {
				border: none;
			}
		.article h3 i, .site h3 i, .blog-post h3 i {
			color: #888;
			float: right;
			padding-left: .5em;
			font-size: 1rem;
			line-height: 2;
			font-style: normal;
			vertical-align: middle;
		}
		.blog-post .shared {
			display: block;
			font-size: 85%;
		}
			.blog-post .shared a:not(:nth-last-of-type(1))::after {
				content: ",";
			}
			.blog-post .shared a:nth-of-type(1):nth-last-child(2)::after {
				content: "";
			}
			.blog-post .shared a + a:nth-last-of-type(1)::before {
				content: " and ";
				border-bottom: 1px solid white;
			}
		.blog-post .reading-time {
			color: #888;
			font-size: 1rem;
			display: none;
		}
@media screen and (min-width: 50em) {
		.blog-post .reading-time {
			display: inline;
		}
}
		.blog-post em {
			color: #080;
			font-style: normal;
			font-weight: normal;
		}
		.blog-post strong {
			font-style: normal;
			font-weight: 800;
		}
		.blog-post tt, .blog-post :not(pre) > code {
			font-family: monospace;
			border-radius: 3px;
			font-size: 115%;
			color: #657b83;
			padding: .1em;
			word-wrap: break-word;
			position: relative;
			top: -.1.5em;
		}
	.article p {
		margin: 0;
		padding: 0;
		color: #666;
	}
	/* https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
	.blog-post blockquote {
		background: #f9f9f9;
		border: 3px solid #f4f4f4;
		border-left: 10px solid #c76c0c;
		margin: 1.5em 1em;
		padding: 0.7em;
	}
	.blog-post blockquote:before {
		font-family: serif;
		color: #ccc;
		content: open-quote;
		font-size: 6em;
		line-height: 1rem;
		float: right;
		margin-left: 1rem;
		margin-top: 2rem;
		content: "\201D";
	}
	.blog-post blockquote p {
		display: inline;
		font-size: 90%;
	}
	.blog-post blockquote ul,
	.blog-post blockquote ol {
		font-size: 90%;
	}
	.blog-post blockquote cite::before {
		content: "— ";
	}
	.blog-post blockquote cite {
		display: block;
		margin-top: .5em;
		margin-left: .5em;
		font-style: normal;
		color: #800;
	}
	.blog-post .hyphenate {
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
		text-align: justify;
	}
	.blog-post footer {
		text-align: center;
		padding-top: 5em;
		padding-bottom: 4em;
		font-size: 85%;
	}
		.blog-post footer .revision {
			font-style: italic;
			border-bottom-style: none;
		}
		.blog-post footer .revision:hover {
			border-bottom-style: dashed;
		}
	.article .award {
		float: left;
		padding-right: .5em;
		position: relative;
		top: .2em;
	}
@media screen and (min-width: 50em) {
	.article .award {
		position: absolute;
		top: 4px;
		left: -48px;
		width: 36px;
	}
}
	.article .authors,
	.article .journal {
		display: block;
	}
	.article .authors {
		color: #222;
	}
	.article .journal {
	}

.sites {
	list-style-type: none;
	padding: 0;
}
	.site {
		position: relative;
	}
	.site h3 i {
		display: block;
		padding: 0;
		float: none;
	}
	.site .thumb {
		display: none;
	}
@media screen and (min-width: 40em) {
	.site .thumb {
		display: block;
		float: right;
		width: 40%;
		height: auto;
		border: 3px solid #888;
		border-radius: 5px;
		margin: 0 0 .5em 2em;
	}
}
@media screen and (min-width: 80em) {
	.site .thumb {
		position: absolute;
		float: none;
		top: .5em;
		right: 100%;
		margin: 0;
		margin-right: 2em;
	}
}
	.site + .site, .blog-post + .blog-post {
		margin-top: 3em;
	}

.header {
	text-align: center;
	font-size: 1rem;
}
	.header h1, .header h2 {
		font-family: serif;
		font-weight: normal;
	}
	nav {
		display: block;
		width: 100%;
		text-align: left;
		word-spacing: -5px;
		letter-spacing: -5px;
		border-top: 2px solid #555;
		background: white;
		position: relative;
		line-height: 1.3rem;
		margin-bottom: 1em;
	}
@media screen and (min-width: 60em) {
	nav {
		margin-bottom: 2em;
	}
}
	nav::before {
		content: "";
		display: block;
		width: 100%;
		border-top: 1px solid #FAFAFA;
		border-bottom: 1px solid #F0F0F0;
	}
		nav a {
			display: inline-block;
			word-spacing: normal;
			letter-spacing: normal;
			color: #333;
			text-decoration: none;
		}
		.links a:hover, .links a.active {
			background: #F0F0F0;
			color: black;
		}
		.links a {
			text-align: center;
			font-size: .7rem;
			padding: .5em 1em;
			border-bottom: 1px solid #F0F0F0;
		}
@media screen and (min-width: 21em) {
		.links a { font-size: .8rem; }
}
@media screen and (min-width: 23em) {
		.links a { font-size: .9rem; }
}
@media screen and (min-width: 25em) {
		.links a {
			display: inline-block;
			font-size: 1rem;
			padding: 0.5rem 1rem;
			border-bottom: none;
		}
}
@media screen and (min-width: 29em) {
		.links a { padding: 0.75rem 1.5rem; }
}
@media screen and (min-width: 34em) {
		.links a { padding: 1rem 2rem; }
}
	.contact {
		white-space: nowrap;
		word-spacing: normal;
		letter-spacing: normal;
		background: #F0F0F0;
		text-align: center;
		padding: .5em;
		vertical-align: middle;
		display: flex;
		justify-content: center;
	}
		.contact a {
			margin: 0 1.5em;
		}
		.contact .icon {
			width: 24px;
			height: 24px;
			vertical-align: middle;
		}
@media screen and (min-width: 40em) {
	.contact {
		padding: 1em;
	}
		.contact .icon {
			width: 32px;
			height: 32px;
		}
}
@media screen and (min-width: 60em) {
	.contact {
		position: absolute;
		line-height: 3.3rem;
		background: none;
		padding: 0;
		right: 1em;
		top: 1px;
	}
}
		.contact a {
			vertical-align: middle;
			display: inline-block;
			margin-right: .2em;
			padding: 0;
		}
		.contact img {
			display: inline;
			height: 100%;
		}
@media screen and (min-width: 60em) {
		.contact img {
			opacity: 0.7;
		}
}
		.contact a:hover img { opacity: 1; }
	.header h1, .header h2 {
		font-weight: normal;
		padding: 0 5%;
	}
	.header h1 {
		font-size: 2em;
		text-transform: uppercase;
		margin: 0;
	}
	.header h2 {
		font-size: 2em;
		margin: 0;
		margin-top: 1em;
	}
	#index .header h2 {
		margin: 0;
		font-size: 1em;
	}
@media screen and (min-width: 30em) {
	.header h1 {
		font-size: 3em;
	}
}
@media screen and (min-width: 50em) {
	.header h1, .header h2 {
		padding: 0;
	}
	.header h1 {
		font-size: 5em;
	}
	.header h2 {
		font-size: 2em;
	}
	#index .header h2 { font-size: 2em; }
}
article {
	text-align: left;
	margin: 2em auto;
	margin-top: 0;
	max-width: 40em;
	width: 90%;
	line-height: 2;
}
	#index article {
		hyphens: auto;
		max-width: 30em;
		text-align: justify;
	}
	article a {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid black;
	}
		article a:hover {
			border-bottom-style: dashed;
			border-bottom-color: #C00;
			color: #C00;
		}
.footer {
	border-top: 1px solid #888;
	text-align: center;
	font-size: .9rem;
	max-width: 38rem;
	margin: 0 auto;
	padding: .5rem;
	color: #888;
}
	.footer a {
		color: #555;
		text-decoration: none;
		border-bottom: 1px dotted #555;
	}
	.footer a:hover {
		color: #111;
		border-color: #111;
		border-bottom-style: solid;
	}
	.footer abbr { border: none; }
	.footer p {
		margin: .5rem 0;
	}


@media print {
	.header nav { display: none; }
	.header h1 { font-size: 2em; page-break-after: avoid; }
	.header h2 { font-size: 1em; page-break-after: avoid; }
	.blog-post h3 { font-size: 1.1em; page-break-after: avoid; }
	.blog-post h4 { page-break-after: avoid; }
	.blog-post h5 { page-break-after: avoid; }
	.article p { color: black; }
	.site .thumb { display: none; }
	article { max-width: 50em; }
	.footer { display: none; }
	html { font-size: 0.80em; }
	@page { margin: 1.5cm 2cm; }
}

.highlight  {
  background: #f7f7f7;
  padding: .5em 1em;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #ddd;
}
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
.highlight .p { color: #000000; font-weight: bold } /* Punctuation */
.highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #000000; font-style: italic } /* Generic.Output */
.highlight .gp { color: #8f5902 } /* Generic.Prompt */
.highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .nc { color: #000000 } /* Name.Class */
.highlight .no { color: #000000 } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #000000 } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */
.highlight .nn { color: #000000 } /* Name.Namespace */
.highlight .nx { color: #000000 } /* Name.Other */
.highlight .py { color: #000000 } /* Name.Property */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #000000 } /* Name.Variable */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
.highlight .se { color: #4e9a06 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #000000 } /* Name.Variable.Class */
.highlight .vg { color: #000000 } /* Name.Variable.Global */
.highlight .vi { color: #000000 } /* Name.Variable.Instance */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */