:root {
	--main-bg-color: #F4F4F4;
	--accent-color: #29824A;
	--accent-highlight: #289952;
	--inset-color: #E4E4E4;
	--main-text-color: #333333;

	--header-height: 3rem;
	--header-text-color: #AAAAAA;

	--footer-height: 3rem;
	--footer-bg-color: #333333;
	--footer-text-color: #999999;
}
/* * { margin:0; padding:0; box-sizing:border-box; } */
html,
body,
body div {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	background-color: var(--main-bg-color);
	font-family: Helvetica, Arial, sans-serif;
	color: var(--main-text-color);
	overflow-y: scroll;		/* prevent reflow on content change */
}
h1 {
	font-size: 1.5rem;
}
h2 {
	font-size: 1.25rem;
}
h3 {
	font-size: 1rem;
}
p {
	line-height: 1.5em;
}
code,
pre {
	background-color: var(--inset-color);
	white-space: pre-wrap;
	margin: 0;
	overflow: auto;
}
a,
a:visited {
	color: var(--accent-color);
	transition: color 250ms, background-color 250ms;
}
a:hover,
a:active,
a:focus {
	color: var(--accent-highlight);
}
table {
	border-collapse: collapse;
	margin: 1rem auto;
}
td,
th {
	padding: 0.5rem 1rem;
	text-align: left;
}
tbody tr:nth-child(odd) {
	background-color: var(--inset-color);
}

tbody tr:nth-child(even) {
}
a.btn,
a.btn:visited,
a.btn:active {
	display: inline-block;
	padding: 0.5rem 0.5rem;
	margin: 0.5rem;
	font-size: 2rem;
	line-height: 1.2em;
	text-align: center;
	text-decoration: none;
	background-color: var(--accent-color);
	color: var(--main-bg-color);
	/* box-shadow: 0 0 10px rgba(0,0,0,0.5); */
	/* border-radius: 0.33rem; */
}
a.btn:hover {
	background-color: var(--accent-highlight);
}
#header {
	min-height: var(--header-height);
	padding: 0.75rem 0;
	margin: 0 10%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#header h1 {
	font-size: 1rem;
	margin: 0;
	padding: 0;
}
#header ul.nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
#header .nav li {
	float:left;
	padding-left: 2rem;
}
#header a:link,
#header a:visited,
#header a:active,
#header a:hover,
#header a:focus {
	font-weight: bold;
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1em;
	color: var(--accent-color);
}
#header .nav a:link,
#header .nav a:visited {
	color: var(--header-text-color);
	font-weight: lighter;
}
#header .nav a:hover,
#header .nav a:active,
#header .nav a:focus {
	color: var(--accent-color);
}
#content {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--header-height) - var(--footer-height));
	margin: 0 10%;
	padding: 1rem 0;
	border-top: thin solid var(--header-text-color);
}
#start-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#latency-graph {
	display: flex;
	justify-content: center;
	position: relative;
	min-height: 5rem;
}
#latency-graph svg {
	width: 75%;
	min-width: 200px;
	max-height: calc(max(150px, 100vh - var(--header-height) - 1rem));
	aspect-ratio: 4 / 3;
}
#latency-graph svg .xAxis,
#latency-graph svg .yAxis {
	font-size: 0.8em;
}
#latency-graph svg .paths {
	fill: none;
	stroke: var(--accent-color);
	stroke-width: 2.5;
}
#latency-graph svg .httpLatencyPath {
	stroke-dasharray: 10,5;
}
#latency-graph svg .tcpLatencyPath {
}
#latency-graph svg .minPath {
	stroke-width: 1;
	stroke-dasharray: 5,5;
}
#footer {
	min-height: var(--footer-height);
	padding: 0.75rem 10%;
	background-color: var(--footer-bg-color);
	color: var(--footer-text-color);
}
#footer>* {
	vertical-align: middle;
}