body {
	max-width: 40em;
	margin: 1em auto; /* auto centers horizontally */
	padding-top: 2em;
	font: 120%/1.5 Baskerville, Palatino Linotype, sans-serif;
	background: hsl(220 10% 95%);

	--transparency-checkerboard: repeating-conic-gradient(hsl(220 10% 89%) 0 25%, hsl(220 10% 96%) 0 50%) 0 / .8em .8em;
}

h1 {
	margin: 0 0 .5em 0;
	font: bold 320%/1 Helvetica Neue, Segoe UI, sans-serif;
	letter-spacing: -.05em;
}

output {
	display: block;
	box-sizing: border-box;
	height: 8em;
	margin: 1em 0;
	border: 10px solid white;
	box-shadow: 0 1px 5px rgb(0 0 0 / 0.5);
	/*
	Why not just background-color: var(--color); ?
	Because we want the transparency checkerboard to be behind it,
	and we can only have one background color, that is painted underneath all background images.
	*/
	background: linear-gradient(var(--color), var(--color)),
	 var(--transparency-checkerboard);
}

.sliders label {
	display: block;
	margin-bottom: 1em;
	background: var(--gradient) 0 1.4em / 100% .8em no-repeat, var(--transparency-checkerboard) repeat-x;
	background-position: 0 1.4em;
}

.sliders input {
	display: block;
	margin: .5em 0 0;
	width: 100%;
}

.sliders label:last-of-type {
	margin-bottom: 0;
}

input[property=color] {
	display: block;
	box-sizing: border-box;
	padding: .3em .4em .1em;
	border: 1px solid rgb(0 0 0 / 0.2);
	border-radius: .1em;
	box-shadow: 0 .05em .1em rgb(0 0 0 / 0.2) inset;
	background: white;

	width: 100%;
	font: 150% Consolas, Monaco, monospace;
}

footer {
	margin-top: 2em;
	border-top: 1px solid hsl(220, 10%, 85%);
}

	footer ul {
		display: inline;
		padding: 0;
		margin: 0;
	}

	footer li {
		display: inline-block;
		padding: .4em .6em;
	}

	footer li:nth-child(even) {
		background: hsl(220 10% 85%);
		margin-left: .5em;
	}

	footer a {
		color: hsl(220 10% 35%);
	}

	footer a:hover {
		color: hsl(220 10% 20%);
	}