body {
	margin: 0;
	font-family: Gill Sans, sans-serif;
	text-align: justify;
	-moz-tab-size: 2;
	  -o-tab-size: 2;
	     tab-size: 2;

	--color-main: hsl(360, 100%, 27%);

	--gradient-color1: steelblue;
	--gradient-offset1: 25%;

	--gradient-color2: grey;
	--gradient-offset2: 50%;

	--gradient-color3: hsl(0, 100%, 40%);
	--gradient-offset3: 75%;
}

figcaption {
	font-size: 0.8em;
}

* {
	box-sizing: border-box
}

article {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2em 2em;
}

h1 {
	font-size: 5em;
	font-weight: 400;
	text-transform: uppercase;
}

h2 {
	margin: 0;
	padding: 2em 0 0.5em;
	font-weight: normal;
}

h3 {
	margin: 0 0 0.5em;
	font-weight: normal;
}

ol {
	margin: 0;
}

figure {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}

p {
	margin-top: 0;
	font-weight: lighter;
}

input[type="number"] {
	max-width: 4.5em;
	text-align: right;
}

img {
	width: 100%;
}

a {
	color: hsl(240, 100%, 50%);
}

header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding-bottom: 15vh;
}

header > nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	padding: 0.25em 0;
	color: black;
}

header > nav > a {
	width: 100%;
	margin: 0.25em 0.5em;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

@media screen and (min-width: 30rem) {
	header > nav::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		content: "";
		background-color: transparent;
		opacity: 0.8;
	}

	header > nav.scrolled {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1;
		color: white;
		-webkit-backdrop-filter: blur(5px);
	}

	header > nav.scrolled::after {
		background-color: var(--color-main);
		box-shadow: 0 2px 2px      hsla(0, 0%, 0%, 0.15),
		            0 3px 1px -2px hsla(0, 0%, 0%, 0.2),
		            0 1px 5px      hsla(0, 0%, 0%, 0.1);
		transition-property: background-color, box-shadow;
		transition-duration: 400ms;
	}

	header > nav > a {
		width: auto;
	}
}

svg text {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

form {
	padding: 16px 8px;
	color: white;
	background-color: var(--color-main);
}

form,
form * {
	display: flex;
	align-items: center;
}

form * {
	margin: 0 4px;
}

form > div {
	flex-direction: column;
	align-items: left;
}

form > div span {
	margin-bottom: 2px;
	font-size: 0.75em;
	text-transform: uppercase;
}

form > button {
	align-self: flex-end;
	margin-left: auto;
}

.selected {
	background-color: hsl(0, 0%, 90%);
}

.text.start {
	text-align: start;
}

.text.center {
	text-align: center;
}

.text.end {
	text-align: end;
}

.color-main.text {
	color: var(--color-main);
}

.color-main.underline {
	text-decoration: underline;
	-webkit-text-decoration-color: var(--color-main);
	        text-decoration-color: var(--color-main);
}

.flex {
	display: flex;
}

.flex.grow {
	flex-grow: 1;
}

.flex.horizontal {
	flex-wrap: wrap;
}

.flex.vertical {
	flex-direction: column;
}

.flex > * {
	width: 100%;
	margin-right: var(--margin);
	margin-left: var(--margin);

	--margin: 8px;
}

@media screen and (min-width: 600px) {
	.flex.horizontal > *:not(:only-child) {
		width: calc(50% - (2 * var(--margin)));
	}
}

.axis.y .zero {
	stroke: black;
	stroke-width: 0.5;
	stroke-dasharray: 2 2;
}

.choropleth .legend rect {
	fill: linear-gradient(to bottom, hsl(0, 100%, 40%) 25%, grey 50%, steelblue 75%);
}

.column .axis .domain,
.column.stacked .axis.subgroup line {
	display: none;
}

.column.stacked .axis.group line {
	stroke: black;
}

.column.stacked .legend text {
	font-size: 0.8em;
	text-anchor: middle;
	alignment-baseline: central;
}

.heat > p {
	margin: 0.5em 0 0;
}

.line > .chart path {
	fill: none;
	stroke: currentColor;
}

.simulate > .chart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 20px;
}

.simulate > .chart > img {
	width: calc(var(--width) - (2 * var(--margin)));
	margin: var(--margin);
	opacity: 0.8;

	--width: 10%;
	--margin: 6px;
}

@media screen and (min-width: 700px) {
	.simulate > .chart > img {
		--width: 5%;
	}
}

.simulate > .chart > img[src$="null.svg"] {
	opacity: 0.25;
}

.tree > .chart .link {
	fill: none;
	stroke: lightgrey;
	stroke-width: 2px;
}

.tree > .chart .node :matches(circle, circle + text) {
	cursor: pointer;
}

.tree > .chart .node circle {
	stroke: darkred;
	stroke-width: 2px;
}

.tree > .chart .node text {
	cursor: default;
}

#Rates h3 {
	margin-bottom: 0.5em;
	font-size: 2em;
	font-weight: normal;
	text-transform: uppercase;
}

#Rates .flex.horizontal p {
	margin-bottom: 0;
}

#Rates .flex.horizontal div > p {
	font-size: 1em;
	font-weight: normal;
}

#Rates .flex.horizontal div > p + span {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0.5em;
	font-size: 2em;
	font-weight: normal;
}

#Rates .district {
	padding: 0.2em 0.4em;
	background-color: var(--color-main);
	color: white;
}

#Rates .ranking {
	counter-reset: ranking;
}

#Rates .ranking > div {
	margin: 0.2em;
	padding: 0.2em 0.5em;
	font-size: 0.8em;
	color: white;
	counter-increment: ranking;
}

#Rates .ranking > div::before {
	content: counter(ranking) ". ";
}

#Rates .choropleth-container {
	display: flex;
}

#Rates .choropleth-container > .choropleth {
	flex-grow: 1;
}

#Rates .choropleth-container > .choropleth + .legend {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	margin: 0.5em 0;
	padding-right: 0.75em;
}

#Rates .choropleth-container > .choropleth + .legend::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0.5em;
	margin: 0.25em 0;
	content: "";
	background-image: linear-gradient(to top, var(--gradient-color1) var(--gradient-offset1), var(--gradient-color2) var(--gradient-offset2), var(--gradient-color3) var(--gradient-offset3));
}

#Rates .line.multi > .chart path {
	stroke-width: 2px;
}

#Rates .lines-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

#Rates .lines-container .line {
	width: 150px;
	height: 30px;
	transition: background-color 200ms;
}

#Rates .lines-container .line .chart path {
	stroke: url(#Rates-gradient);
}

#Comparison .heat ol {
	min-height: 6em;
}

#Team {
	text-align: center;
}

#Team img {
	width: 150px;
	height: 150px;
	border: 1px solid lightgrey;
}