h1 {
	margin-bottom: .5em;
	font-size: 222.22222%;
	line-height: 1.125;
}
h1 + p:not(:last-child) {
	margin-top: -1em;
	margin-bottom: 1.125em;
}
header p:last-child {
	margin-bottom: 2em;
}
h2 {
	margin-top: 2em;
}
i::after {
	content: " — ";
	white-space: pre;
}
i,
address {
	font-style: inherit;
}
img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}
hr {
	max-width: 50%;
	margin: 3em auto;
	border: none;
	border-top: 1px dashed;
	color: inherit;
}
sub {
	font-size: .5em;
}
code {
	font-size: .875em;
	letter-spacing: -.02em;
}
blockquote {
	margin-left: 1px;
	padding-left: 1.5em;
	border-left: .25em solid;
	font-family: serif;
	font-style: italic;
}
ol,
ul,
dd,
#comments ~ article {
	margin-left: 1px;
	padding-left: 1.75em;
}
footer.metadata {
	margin-top: 8em;
}
.posts li {
	margin-bottom: 1.5em;
	padding-bottom: .75em;
	border-bottom: 1px dotted;
}
.posts h3 + p {
	margin: -.75em 0 -.25em;
}
#comments ~ article h3 {
	margin-top: 2.66667em;
	margin-left: -2.33333em;
	padding-left: 1px;
}
#comments ~ section {
	margin-top: 2em;
	border-top: 1px dotted;
}
.standoff,
pre,
figure, p.figure {
	margin-right: 0;
	margin-left: 0;
	padding: .875em 1.75em;
	border: 1px dashed;
}
header p:last-child,
.posts li p:last-child,
img + small,
figcaption,
.standoff h2,
#comments ~ article h3,
[data-chain],
footer {
	font-size: 77.7777777%;
}
footer.metadata h2 {
	font-size: 200%;
}
.standoff h2,
figcaption {
	margin-top: .5em;
}
.imprint nav {
	margin-top: 4em;
	margin-bottom: 4em;
}
.imprint p,
.nav-menu li {
	white-space: pre-wrap; /* 2 whitespace */
}
.nav-menu {
	padding-top: 4em;
	border-top: 2px solid;
}
.nav-menu ul {
	display: block;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.nav-menu li {
	display: inline;
}
.nav-menu li + li::before {
	content: " ";
}
[data-hl="Home"] {
	display: inline;
}
[data-hl="Home"]::before {
	content: "ence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com cssence.com css";
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	font-family: sans-serif;
	font-size: 71.4285714%;
	font-weight: 700;
	letter-spacing: 1em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	opacity: .5;
}
[data-hl="Home"] svg,
header p:last-child br,
.posts li p:last-child br,
.posts li img {
	display: none;
}
header img,
main .visually-hidden {
	overflow: hidden;
	position: absolute;
	z-index: 1;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0,0,0,0);
	border: 0;
	white-space: nowrap;
}
@media screen {
	html {
		overflow: hidden scroll;
		font: 112.5%/1.5 sans-serif;
	}
	body {
		max-width: 40em;
		margin: 0 auto;
		padding: 2em 1em;
	}
	pre {
		overflow: auto;
		tab-size: 2;
	}
}
@media screen and (max-width: 24.95em) {
	body {
		font-size: 4.5vw;
	}
}
@media print {
	body {
		margin: 0;
		padding: 0;
		font-size: 12pt;
	}
	.posts li a::before {
		content: "https://cssence.com" attr(href);
		display: block;
		margin-bottom: .5em;
		font-size: 87.5%;
		font-weight: 400;
	}
	header p:last-child {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: 0;
		border-bottom: 1px solid;
	}
	header p:last-child::before {
		position: absolute;
		content: "cssence.com";
		left: 50%;
		width: 80mm;
		margin-left: -40mm;
		font-weight: 700;
		text-align: center;
	}
	header time {
		float: right;
	}
	h1 {
		margin-top: 20mm;
	}
	a {
		color: inherit !important;
		text-decoration: none;
	}
	pre {
		tab-size: 4;
		white-space: pre-wrap;
	}
	footer.metadata h2 {
		margin: 0;
		border-top: 1px solid;
		font-size: inherit;
	}
	footer.metadata p {
		margin: 0;
	}
	header i::after,
	#comments ~ section,
	.codepen,
	body > footer {
		display: none;
	}
}