@charset "utf-8";
/* based on legibelle.css by OOQQ - free to use under the GPLv2 license */
* {
  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
}

html {
	font-size: 10px; /*base 10 units*/
}

body {
	font-family: "Trebuchet", "Trebuchet MS", Sans-Serif, Arial, sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 2.33rem;
	letter-spacing: 0.03rem;
	color: #1f2024;
	background-color: whitesmoke;
	display: grid;
	grid-auto-rows: auto 1fr auto;
	grid-row-gap: 2.6rem;
	min-height: 100vh;
}

body > * {
	display: grid;
	grid-template-columns: auto minmax(auto, 64rem) auto;
	align-self: start;
	padding: 0 2rem;
}

body > * > * {
	grid-column: 2;
}

header {
	padding-top: 2.6rem;
}

main > * {
	align-self: start;
}

footer {
	padding-bottom: 2.6rem;
}

footer ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: start;
}

footer li {
	list-style-type: none;
	margin-right: 1rem;
}

footer li:last-of-type {
	margin-right: 0;
}

h1, h2, h3 {
	font-weight: normal;
	letter-spacing: 0;
}

header > h1, header > h2 {

	margin: 0;
}

img {
	width: 100%;
	height: auto;
}

p {
	margin: 0;
	padding: 0;
}

pre {
	overflow: auto;
	padding: 1rem;
	white-space: pre;
	background-color: rgba(0,0,0,0.1);
}

ul {
	list-style-type: disc;
	padding-left: 1.7rem;
}

img, p, pre, ul {
	margin-bottom: 2.6rem;
}

.index > main > ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

small {
	font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Sans-serif;
	font-size: 1.0rem;
	letter-spacing: 0.1rem;
}

a {
	text-decoration: none;
	color: whitesmoke;
	background: dodgerblue;
	padding:0 0.2rem;
	-webkit-animation: colorRotator 30s infinite linear;
	animation: colorRotator 30s infinite linear;
}

.dark a {
	color: #1f2024;
}

a:hover {
	text-decoration: underline;
}

@-webkit-keyframes colorRotator {
	0%, 100% {-webkit-filter: hue-rotate(0deg)}
	50% {-webkit-filter: hue-rotate(360deg)}
}

@keyframes colorRotator {
	0%, 100% {filter: hue-rotate(0deg)}
	50% {filter: hue-rotate(360deg)}
}

.emoji {
	font-size: x-large;
}

.dark {
	background-color: #1f2024;
}

.dark, .dark h1, .dark h2, .dark h3, .dark p {
	color: gainsboro;
}

.date {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.q {
	padding: 1rem 0;
	font-style: italic;
	background-color:rgba(0,0,0,0.075);
}

@media (min-width:640px) {
	body {
		grid-row-gap: 6rem;
	}

	header {
		padding-top: 9rem;
	}

	footer {
		padding-bottom: 6rem;
	}

	h1, h2, h3 {
		font-weight: normal;
		font-size: 3rem;
		letter-spacing: 0;
	}

	h3 {
		font-size: 2.441rem;
	}

	main > h3 {
		margin-bottom: 2.441rem;
	}

	header > h1, header > h2 {
		line-height: 3.6rem;
		margin: 0;
	}
}