/**
 * Sticky footer with flexible height
 */
 
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

/* Toggle checkbox to alternate between short/long content */
#contents:checked ~ p { display: none }

/* Basic styling */
body {
	margin: 0;
	font: 100%/1.5 Baskerville, Palatino Linotype, Palatino, serif;
}

h1 { margin: .5em 0 0; }

header { text-align: center; height: 3em; }

main, footer {
	display: block;
	padding: .5em calc(50% - 400px);
}

footer {
	background: linear-gradient(#222, #444);
	color: white;
}