<ol reversed class="paces" lang="en">
	<li class="pace js">JS+<blockquote class="quote js">JS+: The JavaScript ecosystem (not the language!): Anyone else feels overwhelmed by the rate of rapid changes here?</blockquote>
	</li>
	<li class="pace css">CSS<blockquote class="quote css">CSS: This is moving in a nice click lately, with lots of useful new stuff enabled in the browsers</blockquote></li>
	<li class="pace html">HTML<blockquote class="quote html">HTML: Started with 20 something "tags", now we have over 100 "elements", but I feel that I've been able to keep up with the pace of change here</blockquote></li>
	<li class="pace url">URLs<blockquote class="quote url">URLs: Sadly they are frequently changing; links die. We should work hard to keep URLs unchanged, but that's not how it is</blockquote></li>
	<li class="pace http">HTTP<blockquote class="quote http">HTTP: Gradually changed (http/2), but it kind of feels good that it doesn't constantly change underneath us</blockquote></li>
	<li class="pace tcpip">TCP/IP<blockquote class="quote tcpip">TCP/IP: Deliberately dumb, simple, all it does is move packets around</blockquote></li>	
</ol>
<footer><blockquote><p>Fast gets all the attention,<br>
	but Slow has all the power</p><cite>Stewart Brand "Pacelayers"</cite>
</blockquote><a href="https://vimeo.com/373128517">The Layers of the Web - Jeremy Keith</a></footer>

body {
	font-family: sans-serif;
	font-size: calc(0.5em + 1vmin);
	color: #eee;
	background-color: #111;
	width: 90%;
	max-width: 35em;
	margin-left: auto;
	margin-right: auto;
	padding: 2em;
}
.paces {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	padding-top: 100%;
}
.pace {
	font-size: 90%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0.5em;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 60%;
	background-color: rgba(255, 255, 255, 0.1);
	transition: all ease-in-out 0.2s;
	.quote {
		opacity: 0;
		margin: 0;
		padding: 0;
	}
	&:hover,
	&:focus,
	&:active {
		cursor: grabbing;
		background-color: #111;
		color: #111;
		animation: none !important;
		.quote {
			color: #fff;
			hyphens: auto;
			z-index: 100;
			opacity: 1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.pace {
	&.js {
		margin: 5%;
		animation: 2.5s infinite linear rotate;
		box-shadow: 0 0 5em #fff;
	}
	&.css {
		margin: 10%;
		animation: 5s infinite linear rotate;
	}
	&.html {
		margin: 15%;
		animation: 10s infinite linear rotate;
	}
	&.url {
		margin: 20%;
		animation: 15s infinite linear rotate;
	}
	&.http {
		margin: 25%;
		animation: 25s infinite linear rotate;
	}
	&.tcpip {
		margin: 30%;
		animation: 35s infinite linear rotate;
	}
}
.quote {
	&.js {
		padding: 10%;
	}
	&.css {
		padding: 5%;
	}
	&.html {
		padding: 4%;
	}
}
footer {
	text-align: center;
	background-color: #111;
	transform: translateY(-80%);
	padding-top: 2em;
	padding-bottom: 2.5em;
	padding-left: 2em;
	padding-right: 2em;
	margin-left: -2em;
	margin-right: -2em;
	box-shadow: 0 -1em 1em #111;
	a {
		color: #666;
		text-decoration: none;
		&:hover,
		&:focus,
		&:active {
			color: #fff;
		}
	}
}
.quotes .quote {
	opacity: 0;
	&:target {
		position: absolute;
		top: 0;
		opacity: 1;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}