html, body {
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
html {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 87.5%;
}

header {
	background-color: #666;
	color: white;
	padding: 1em;
}
header>h1 {
	margin: 0;
	font-size: 4rem;
}
article {
	flex: 1;
}
footer {
	background-color: #333;
	min-height: 100px;
}
ul#links {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 24em;
}
ul#links>li {
	position: relative;
	display: block;
	flex-direction: column;
	color: #666;
	background-color: #f8f8f8;
	padding: .5em;
	border: thin solid #999;
}
ul#links>li>a {
	text-decoration: none;
	color: #666;
	display: none;
	max-height: 0;
	opacity: 0;
	transition: max-height 250ms 25ms, opacity 250ms 25ms;
}
ul#links>li>a:after,
ul#links>li>a {
	display: block;
}
ul#links>li[focus]>a {
	flex: 1;
	max-height: 12em;
	opacity: 1;
	content: attr(data-title);
	background-color: white;
	padding: .25em .5em;
	border: thin solid #ccc;
	qwhite-space: nowrap;
	qwidth: -moz-max-content;
	margin: .25em 0 0 0;
}