@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap');

body {
	background-color: white;
	color: black;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}
a > img {
	border: 0;
	vertical-align: middle;
}
img.icon {
	height: .9em;
	width: auto;
}
hr {
	border: 1px dotted #eee;
	clear: both;
	margin: 1em 0;
}

header {
	background-color: steelblue;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 2em, rgba(255,255,255,.1) 2em, rgba(255,255,255,.1) 4em);
	border-bottom: .5em solid orange;
	box-shadow: 0 0 4px gray;
	padding: .5em;
}
	header > h1 {
		font-size: 1em;
		margin: 0;
	}
		header > h1 img {
			height: 2em;
			width: auto;
			padding: 0 .5em 4px 0;
		}
	header > nav {
	}
		header > nav a {
			color: white;
			padding-right: .5em;
			text-decoration: none;
		}
		header > nav a,
		header > nav form {
			display: block;
			margin: 1em .5em;
		}
		header > nav img {
			width: 1em;
			height: auto;
		}
			header > nav form input {
				background-color: white;
				border: 0;
				border-radius: .5em;
				padding: .5em;
				width: 90%;
			}
			header > nav form button {
				background-color: transparent;
				border: 0;
			}

@media only screen and (min-width: 777px) {
header {
	text-align: center;
}
	header > h1,
	header > nav {
		display: inline-block;
	}
		header > h1 img {
			height: 3em;
		}
		header > nav a,
		header > nav form {
			display: inline-block;
		}
			header > nav form input {
				width: 10em;
			}
		header > nav img {
			height: .9em;
			width: auto;
		}
}

main {
	padding: 1em .5em;
}
	main a {
		color: royalblue;
	}
	main a:hover {
		color: dodgerblue;
	}
	main a.button {
		background-color: dodgerblue;
		border-radius: 2px;
		color: white;
		display: inline-block;
		font-size: .9em;
		padding: .5em 1em;
		text-align: center;
		text-decoration: none;
	}
	main a.button:hover {
		background-color: royalblue;
	}
	main aside {
		background-color: lightgoldenrodyellow;
		border-left: .5em solid palegoldenrod;
		box-shadow: 2px 2px 4px lightgray;
		font-size: 0.9em;
		margin: 1em .5em;
		padding: .5em;
	}
	main > section {
	}
		main > section > article {
		}
			main > section > article time {
				color: gray;
				display: block;
				font-size: small;
				margin: -1em 0;
			}
		main > section h2 {
			border-bottom: 1px solid lightgray;
			clear: both;
			color: dimgray;
			font-size: 1.5em;
			font-weight: normal;
			margin: 2em 0;
			text-align: center;
		}
		main > section h3 {
			background-color: #eee;
			color: #333;
			font-size: 1em;
			margin: 2em 0 1em 0;
			padding: .5em;
		}
/*
		main > section code,
		main > section pre {
			background-color: #eee;
			border-radius: 2px;
			padding: 2px;
		}
*/
		main > section dl {
			margin: 2em 1em;
		}
			main > section dl > dt {
				font-weight: bold;
			}
			main > section dl > dd {
				margin-left: 0;
				margin-bottom: 1em;
			}
		main > section figure {
			background-color: #eee;
			background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
			background-size: 1em 1em;
			background-position: 0 0, .5em .5em;

			border: 1px solid dimgray;
			display: inline-block;
			margin: 1em 1% 0 0;
			width: 100%;
		}
			main > section figure img {
				display: block;
				margin: 1em .5em;
			}
			main > section figure figcaption {
				background-color: dimgray;
				color: white;
				font-size: 0.9em;
				padding: 1em .5em;
			}
		main > section ul {
		}
			main > section ul > li,
			main > section ol > li {
				margin-top: .5em;
				margin-bottom: .5em;
			}
		main > section table {
			border: 1px solid dimgray;
			margin: 1em auto;
			padding: 0;
			max-width: 1000px;
		}
			main > section table > caption {
				background-color: dimgray;
				color: white;
				font-size: small;
			}
			main > section table th {
				background-color: lightgray;
				padding: 1em .5em;
			}
			main > section table td {
				background-color: #eee;
				padding: 1em .5em;
			}

@media only screen and (min-width: 1000px) {
main {
	padding: 1em 10%;
}
	main aside {
		padding: 1em .5em;
	}
		main > section figure {
			width: 30%;
		}
		main > section table.infobox {
			display: inline-block;
			margin: 1em 1% 0 0;
			width: 30%;
		}
}
@media only screen and (min-width: 2000px) {
main {
	padding: 1em 20%;
}
}

footer {
	background-color: gray;
	border-top: 1px solid dimgray;
	clear: both;
	color: lightgray;
	font-size: small;
	padding: 0 .5em .5em .5em;
}
	footer a {
		color: white;
	}
	footer > nav {
		border-bottom: 1px solid dimgray;
		padding: 1em 0;
		text-align: center;
	}
		footer > nav a {
			margin: 0 .5em;
		}
		footer > nav img {
			border: 0;
			border-radius: 50%;
			height: 48px;
			width: 48px;
		}
		footer > nav img.patreon { background-color: #f86754; }
		footer > nav img.slack { background-color: #4a154b; }
		footer > nav img.twitter { background-color: #1da1f2; }
		footer > nav img.facebook { background-color: #1877f2; }
		footer > nav img.youtube { background-color: #ff0000; }
		footer > nav img.blogger { background-color: #ff5722; }

@media only screen and (min-width: 1000px) {
footer {
	padding: 0 10% .5em 10%;
}
}
@media only screen and (min-width: 2000px) {
footer {
	padding: 0 20% .5em 20%;
}
}