@font-face {
		font-family: 'Tiamat';
		src: url("/code/tiamat.woff2") format("woff2");
		}
@font-face {
		font-family: 'Signika';
		src: url("/code/signika.woff2") format("woff2");
		}
	@font-face {
		font-family: 'Signika';
		src: url("/code/signikaBold.woff2") format("woff2");
		font-weight: bold;
		}
* {box-sizing:border-box;}
body {
	font-family:Signika,"Segoe UI",Tahoma,Sans-Serif;
	font-family:"Segoe UI",Tahoma,Sans-Serif;
	font-feature-settings:"lnum" 1, "tnum" 1, "salt" 1;
	overflow-y:scroll;
	max-width:960px;
	margin:0 auto;
	padding:0 2em 2em;
	background-color:#383838;
	background-image:url(denim.png);
	color:white;
	}
body a {
		color:Cyan;
		text-decoration:none;
		}
	body a:hover,
	body a:focus {
		color:DeepSkyBlue;
		}
h1, h2, h3, h4, h5, h6 {
		font-weight:600;
		text-shadow: 0 0 5px #000;
		color:#ebe9d9;
		margin-bottom:0;
		}
	h1 {
		font-family:Tiamat,'Copperplate Gothic',Signika,Tahoma,Sans-Serif;
		font-weight:normal;
		}
	h1+*, h2+*, h3+*, h4+*, h5+*, h6+* {
		margin-top:0.2em;
		}
header * {
		margin:0;
		}
	body > header {
		text-align:right;
		padding:1em 0 2px;
		}
	body > header p {
		font-variant:small-caps;
		}
body > footer,
	.footnote {
		clear:both;
		font-size:x-small;
		padding:0 1em;
		color:silver;
		}
	body > footer > * {
		margin:0.5em 0;
		}
.tabs {display:-webkit-flex; -webkit-flex-wrap:wrap;
		display:flex;
		flex-wrap:wrap;
		position:relative;
		}
	.tabs > input {/* display:none breaks accessibility */
			position:absolute;
			height:0; width:0; margin:0; border:0; padding:0;
			overflow:hidden;
			z-index:-1;
			}
	.tabs > label,
	.tabs > div {
		background-color:rgba(0,0,0,0.50); /* 50% darker */
		border:1px solid rgba(0,0,0,0.75);
		}
	.tabs > label {
			margin:0 2px -1px; /* cover tab's div border */
			border-bottom-color:transparent;
			border-radius:8px 8px 0 0;
			padding:.25em 1em;
			background-color:rgba(0,0,0,0.20); /* not-selected */
			color:gray;
			z-index:1; /* tab cosmetics */
			font-variant:small-caps;
			}
		.tabs > label:first-of-type {margin-left:0;}
		.tabs > label:last-of-type {margin-right:0;}
		.tabs > label:hover {
			background-color:rgba(0,0,0,0.40); /* hovered-over */
			cursor:pointer;
			color:DeepSkyBlue !important;
			}
		.tabs > input:checked+label {
			background-color:rgba(0,0,0,0.50); /* 50% darker */
			border-bottom-color:rgba(255,255,255,.08);
			z-index:3;
			}
	.tabs > div {
			display:none;
			-webkit-order:1; order:1;
			color:white;
			margin-top:0px;
			padding:1em;
			border-radius:0 8px 8px 8px;
			width:100%;
			z-index:2; /* tab cosmetics */
			}
		.tabs > div > header {
			margin-bottom:1em;
			}
		.tabs > div > header > *:first-child {
			border-bottom:1px solid silver;
			padding-bottom:1px;
			}
		.tabs > div > header > p {
			font-size:14px;
			font-variant:small-caps;
			}
		.tabs > div > *:first-child {margin-top:0;}
		.tabs > div > *:last-child {margin-bottom:0;}
		.tabs > input:checked+label+div {
			display:block;
			height:auto;
			}
em.book {
		display:inline-block;
		font-variant:small-caps;
		padding-right:1px;
		font-weight:normal;
		/* font-family:Calibri,Sans-Serif; */
		/* text-transform:lowercase; */
		}
	em.book:first-letter {
		/* text-transform:uppercase; */
		}
.inline {
		list-style:none; padding:0;
		}
	.inline li {
		display:inline;
		}
	.inline > li:not(:last-child)::after {
		content:" • ";
		}
figure.right {
		float:right;
		margin:0 0 0 1em;
		padding:0;
		border-radius:0.5em;
		width:500px;
		max-width:67%;
		}
	figure.right img {
		display:block;
		border:4px ridge rgba(255,255,255,.3);
		border-radius:0.5em;
		width:100%;
		height:auto;
		}
	figure.right a:hover img,
	figure.right a:focus img {
		border-color:DeepSkyBlue;
		}
	img.one-em {
		height:1em;
		vertical-align:middle;
		margin:0 0.1em;
		}
@media only screen and (max-width: 900px) {
	.tabs > label {
		font-size:1.67vw;
		}
	}
@media only screen and (max-width: 600px) {
	figure.right {
		float:none;
		margin:0 auto;
		width:320px;
		max-width:100%;
		}
	.tabs > div > header {
		text-align:center;
		}
	}