* { box-sizing: border-box; }

svg {
	width: 100%;
	font-family: Avenir, sans-serif;
	max-height: 80vh;
}

.dot {
	fill: #0071BA;
}
.dot:hover {
	fill: #F2D865;
}

.tick text,
text.label {
	font-size: 11pt;
}

text.sub.label {
	fill: gray;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 70%;
}

/* detail pages */

html {
	font-family: menlo, monospace;
	line-height: 1.2;
}

div {
	position: relative;
}

#toggles {
	margin: 1em
}

#toggles fieldset {
	display: inline-block;
	border: 1px solid #aaa;
}
#toggles label {
	display: block;
	padding: 0.25em;
}

table {
	border-collapse: collapse;
	margin: 1em;
}

th, td {
	padding: 0.25em;
}

thead th {
	padding: 0.5em;
	min-width: 12ch;
}

th {
	text-align: left;
}

td {
	text-align: right;
}

thead {
	border-top:  1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
tbody {
	border-bottom: 1px solid #aaa;
}

legend {
	font-weight: bold;
}

footer {
	max-width: 66ch;
	margin: 2em;
}

footer h2 {
	font-size: 1rem;
	margin: 0;
}
footer ul {
	margin: 0;
	padding-left: 1em;
}
footer li {
	margin: 0.5em;
}

figure {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	margin: 1em;
}

figcaption {
	padding: 1em;
	background-color: black;
	color: white;
}

@keyframes one {
	0% {
		opacity: 1; 
	}
	50% {
		opacity: 0; 
	}
}

@keyframes two {
	0% {
		opacity: 0; 
	}
	50% {
		opacity: 1; 
	}
}

#one {
	animation-name: one;
	animation-duration: 2s; 
	animation-iteration-count: infinite; 
	animation-timing-function: steps(1);
}

#two {
	animation-name: two;
	animation-duration: 2s; 
	animation-iteration-count: infinite; 
	animation-timing-function: steps(1);
}