body {
	margin: 0;
	padding: 0;
	font-family: "Fedra Serif B 16", Georgia, 'Times New Roman', Times, serif;
	font-size: 1.414em;
	line-height: 1.414;
}
ul {
	display: grid;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-aspect-ratio: 4/3) {
	ul {
		grid-template-columns: 1fr 1fr;
	}
}
li {
	display: grid;
}
a {
	display: flex;
	padding: 0 11.1111vmin;
	color: black;
	text-decoration: underline skyblue wavy;
}
li:first-of-type a {
	border-right: 1px dotted black;
}
a:hover {
	background-color: blanchedalmond;
	color: darkred;
}
a > span {
	margin: auto;
	max-width: 30em;
	position: relative;
	overflow: hidden;
	padding-bottom: 3em;
}
a > span::before {
	content: '☞ ';
	display: inline-block;
	margin-right: .2em;
}
a span span {
	left: 0;
	bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	max-width: 30em;
	position: absolute;
}
a span img {
	width: 1em;
}
a:focus {
	background-color: aliceblue;
}
a:focus > span::before,
a:focus img,
a:hover img {
	animation: wobble 1s linear infinite;
}
a:focus img:nth-last-of-type(2n),a:hover img:nth-last-of-type(2n) { animation-duration: 1.17s; animation-delay: -.6s;}
a:focus img:nth-last-of-type(3n),a:hover img:nth-last-of-type(3n) { animation-duration: .91s; }
a:focus img:nth-last-of-type(5n),a:hover img:nth-last-of-type(5n) { animation-duration: 1.33s; animation-delay: -.65s;}
a:focus img:nth-last-of-type(7n),a:hover img:nth-last-of-type(7n) { animation-duration: .87s; }
@keyframes wobble {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-.1em);
	}
	75% {
		transform: translateY(.1em);
	}
	100% {
		transform: translateY(0);
	}
}