main {
	width: 90%;
	max-width: 46rem;
	margin: 0 auto;
	font-family: Avenir, Helvetica, Arial, sans-serif;
}

figure {
	width: 66%;
	margin: 0 0 2rem 0;
}

figure.sheen {
	background-image: url(/public/files/screenshotsheen.png);
	background-size: cover;
}
figure.sheen img {
	mix-blend-mode: lighten;
}

figure img {
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.333));
}

img {
	max-width: 100%;
	object-fit: contain;
}

footer {
	text-align: center;
}

code {
	white-space: pre-wrap;
}

li code {
	border: 1px solid #ccc;
	border-radius: 1px;
	background-color: aliceblue;
	padding: 0 2px;
	display: inline-block;
}

kbd,
samp {
	font-weight: bold;
}

kbd {
	border: 1px solid #ccc;
	border-radius: 1px;
	padding: 0 2px;
}

.icon {
	display: inline-block;
	height: 2rem;
	line-height: 2;
	vertical-align: middle;
}

sup.nb,
a[download]+sup {
	background: gold;
	padding: 0 .3rem;
	border-radius: 2px;
	font-size: .625rem;
}

mark {
	background: linear-gradient(104deg, rgba(252, 242, 100, 0) 0.9%, rgba(252, 242, 100, 1.25) 2.4%, rgba(252, 242, 100, 0.5) 5.8%, rgba(252, 242, 100, 0.1) 93%, rgba(252, 242, 100, 0.7) 96%, rgba(252, 242, 100, 0) 98%), linear-gradient(183deg, rgba(252, 242, 100, 0) 0%, rgba(252, 242, 100, 0.3) 7.9%, rgba(252, 242, 100, 0) 15%)
}

del {
	color: #8C8C8C;
}

figcaption {
	font-size: 0.875rem;
	font-style: italic;
}

ol {
	padding: 0;
	list-style-position: outside;
}


.terminal {
	background: #eee;
	padding: 1em;
	font-size: 0.75rem;
	line-height: 1.5;
	box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.333);
}

@media screen and (min-width: 640px) {

	ol {
		columns: 2 auto;
		gap: 3rem;
	}

	ol li {
		break-inside: avoid;
	}

	.tabloid {
		column-count: 2;
		gap: 1rem;
		border: 1px solid black;
		border-width: 1px 0;
		padding: 1rem;
		margin-bottom: 1rem;

	}
}