:root {
	--light-primary-color: #EEE;
	--lightish-primary-color: #DDD;
	--lightishish-primary-color: #AAA;
	--primary-color: #777;
	--darkishish-primary-color: #666;
	--darkish-primary-color: #555;
	--dark-primary-color: #333;
	--light-secondary-color: #FFECC9;
	--lightish-secondary-color: #FFD991;
	--secondary-color: #F5C262;
	--darkish-secondary-color: #E9AD3B;
	--dark-secondary-color: #E2980C;
	--light-tertiary-color: #FDC7C8;
	--lightish-tertiary-color: #948FFB;
	--tertiary-color: #6760F1;
	--darkishish-tertiary-color: #5145DE;
	--darkish-tertiary-color: #E53A43;
	--dark-tertiary-color: #D12830;
	--eggshell-color: #FAFCDA;
	--go-color: #30E84F;
	--darkish-go-color: #00BB00;
	--dark-go-color: #008800;
	--good-color: #18DD39;
	--fair-color: #E2690C;
	--bad-color: #E53A43;
	--light-grey-color: #CCC;
	--lightish-grey-color: #BBB;
	--grey-color: #808080;
	--darkish-grey-color: #777;
	--dark-grey-color: #555;
	--text-color: #000;
	--results-height: 609px;
	--footer-height: 100px;
}

@media (min-width: 800px) {
	section {
		width: 700px;
	}

	#usageStopMessage {
		max-width: 545px;
	}

	#progress > div:first-of-type > div {
		width: 200px;
		height: 200px;
		max-width: calc((100vw - 20px) / 3);
		max-height: calc((100vw - 20px) / 3);
		margin: 0 calc((100% - 600px) / 8);
	}

	#progress > div:first-of-type > div > h3 {
		position: absolute;
		top: 80%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	#results > div > div {
		min-width: 120px;
		font-size: 112.5%;
		margin: 0 10px;
	}

	#startDiv {
		margin: auto;
		position: relative;
		width: 700px;
	}

	button#start {
		--start-movement: 46px;
		position: absolute;
		right: 10px;
		transform: translateY(calc(-100% - var(--start-movement)));
		transition: transform 1s ease;
	}

	#startDiv:first-child > button#start {
		--start-movement: 0;
		position: relative;
		transform: none;
		width: 100%;
	}

	#settings:not([open])~div > button#start {
		--start-movement: 21px;
		padding: 5px 10px;
		top: -15px;
		margin: 0;
	}
}

@media (min-width: 500px) {
	#settings[open] {
		height: 412px;
	}
	footer > div {
		display: inline-block;
	}
}

@media (max-width: 800px) {
	button#start {
		box-sizing: content-box;
		display: block;
		margin: -20px auto 15px;
		padding-left: 10px;
		padding-right: 10px;
		width: calc(100% - 20px);
	}
}

@media (max-width: 663px) {
	:root {
		--footer-height: 125.5px;
	}
}

@media (max-width: 436px) { /* 48px / .11 */
	h1 {
		font-size: 11vw !important;
	}
}

@media (max-width: 432px) { /* 48px / .11 */
	#packetLoss {
		--totalPacketLossScale: 1.2 !important;
	}
}

@media (max-width: 428px) { /* 48px / .11 */
	#results[open] {
		height: calc(var(--results-height) + 76px) !important;
	}
}

@media (max-width: 357px) {
	:root {
		--footer-height: 151px;
	}
}

* {
	position: relative;
}

body {
	/* background-color: var(--primary-color); */
	background-color: var(--darkish-primary-color);
	font-family: sans-serif;
	margin: 0;
	min-height: calc(100vh - var(--footer-height));
	padding-bottom: var(--footer-height);
	position: relative;
}

h1, h2, h3, h4,
nav,
summary {
	color: var(--dark-primary-color);
	font-family: 'Squada One', sans-serif;
	margin: 0 0 5px;
}

h1 {
	/* display: inline-block; */
	display: block;
	margin-top: 20px;
	text-shadow: 1px 2px 3px rgba(0,0,0,0.60);
	font-size: 48px;
	color: var(--light-primary-color);
	font-weight: 400;
	text-align: center;
}

h1 sup {
	font-size: 30%;
	color: var(--dark-tertiary-color);
	text-shadow: 1px 2px 3px rgba(0,0,0,.4)
}

h2,
nav,
summary {
	text-shadow: 1px 2px 2px rgba(0,0,0,0.15);
	font-size: 32px;
}

h3 {
	text-shadow: 1px 2px 2px rgba(0,0,0,0.15);
	font-size: 24px;
}

header {
	margin: 0 8px;
	margin-bottom: 7vh;
	padding: 3px;
}

#logo {
	float: left;
	margin-right: 10px;
	width: 56px;
}

#logo img {
	filter: drop-shadow( 2px 2px 3px rgba(0, 0, 0, .7));
}

nav {
	height: 44px;
	margin: auto !important;
	margin-top: 10px !important;
	max-width: 720px;
	overflow: visible;
}

nav > ul {
	display: inline-flex;
	justify-content: space-around;
	align-items: stretch;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 101%;
}

nav ul > li {
	flex: 1 1 30%;
	margin-right: 1%;
	margin-top: 0;
	padding: 0;
	text-align: center;
}

nav details {
	overflow: visible !important;
	text-align: left;
}

nav details:not([open]) {
	height: 44px;
}

nav details[open] {
	box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.46);
	z-index: 100;
}

nav details ul > li {
	padding: 0 5px 10px;
}

nav ul li a,
nav summary {
	color: var(--eggshell-color) !important;
	cursor: pointer;
	padding: 5px 10px !important;
}

nav ul li a {
	display: block;
}

nav summary {
	white-space: nowrap;
}

@supports (-moz-appearance: none) {
	nav summary {
		list-style-position: outside;
		padding-left: 0 !important;
		margin-left: 45px;
		text-indent: -10px;
	}
}

nav summary::-webkit-details-marker {
	margin-right: 5px;
}


main {
	/* max-width: 720px; */
	margin: auto;
}

section,
details {
	background-color: var(--lightish-primary-color);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	border-radius: 10px;
}

section,
main details {
	box-sizing: border-box;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 10px;
	max-width: 700px;
}

details {
	display: block; /* for Edge */
	transition: height 1s ease, display 0.5s ease, display 0.5s ease;
	overflow: hidden;
}

main details:not([open]) {
	height: 55px;
}

#settings:not([open]) {
	height: 55px;
}

section > *:last-child,
details > p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--tertiary-color);
}

a:visited {
	color: var(--darkish-tertiary-color);
}

p~ul {
	margin-top: -10px;
}

li~li {
	margin-top: 6px;
}

#settings > form.slider {
	height: 56px;
}

#settings > form:first-of-type {
	margin-top: 10px;
}

#settings > form:not(.slider),
#settings > div:first-of-type,
#settings > div:nth-of-type(2) {
	margin-top: 10px;
	margin-bottom: 10px;
}

#settings p {
	margin-top: 12px;
	margin-bottom: 0;
}

input[type=range] {
	-webkit-appearance: none;
	height: 6px;
	margin: 16px 0;
	width: 100%;
	background: transparent;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: var(--darkishish-tertiary-color);
	border: none;
	border-radius: 3px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
	height: 32px;
	margin-top: -13px;
	width: 20px;
}

input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	background-color: var(--darkishish-tertiary-color);
	border: none;
	border-radius: 3px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
	height: 32px;
	width: 20px;
}

input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	background-color: var(--darkishish-tertiary-color);
	border: none;
	border-radius: 3px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
	height: 32px;
	width: 20px;
}

input[type=range]:disabled::-webkit-slider-thumb {
	background-color: var(--lightish-grey-color);
	box-shadow: none;
}

input[type=range]:disabled::-moz-range-thumb {
	background-color: var(--lightish-grey-color);
	border: none;
	box-shadow: none;
}

input[type=range]:disabled::-ms-thumb {
	background-color: var(--lightish-grey-color);
	box-shadow: none;
}

input[type=range]::-webkit-slider-runnable-track {
	background: transparent;
	border-color: transparent;
	color: transparent;
	background-color: var(--lightish-tertiary-color);
	height: 6px;
}

input[type=range]::-moz-range-track {
	background: transparent;
	border-color: transparent;
	color: transparent;
	background-color: var(--lightish-tertiary-color);
	height: 6px;
}

input[type=range]::-ms-track {
	background: transparent;
	border-color: transparent;
	color: transparent;
	background-color: var(--lightish-tertiary-color);
	height: 6px;
}

input[type=range]:disabled::-webkit-slider-runnable-track {
	background-color: var(--light-grey-color);
}

input[type=range]:disabled::-moz-range-track {
	background-color: var(--light-grey-color);
}

input[type=range]:disabled::-ms-track {
	background-color: var(--light-grey-color);
}

select {
	/* background-color: var(--lightish-tertiary-color); */
	color: var(--text-color);
	border: none;
	border-radius: 3px;
	padding: 3px;
}

select:disabled {
	background-color: var(--light-grey-color);
}

nav a,
button {
	background-color: var(--darkishish-tertiary-color);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	max-width: 700px;
	padding: 15px 20px;
	text-decoration: none;
}

nav a {
	padding: 10px 15px !important;
}

nav a.current-page {
	background-color: var(--dark-tertiary-color) !important;
}

button#start {
	background-color: var(--darkish-go-color);
	color: var(--text-color);
	font-family: 'Squada One', sans-serif;
	font-size: 30px
}

nav a:disabled,
button:disabled {
	box-shadow: none;
	background-color: var(--light-grey-color) !important;
	cursor: default;
}

nav a:hover,
button:hover {
	background-color: var(--tertiary-color);
}

button#start:hover {
	background-color: var(--go-color);
}

nav a:active,
button:active {
	box-shadow: none;
	background-color: var(--dark-tertiary-color);
}

button#start:active {
	background-color: var(--dark-go-color);
}

#progress[open] {
	height: 283px;
	max-height: calc((100vw - 20px) / 3 + 105px);
	height: min(283px, calc((100vw - 20px) / 3 + 105px));
}

#progress > div {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
}

#progress > div > div {
	width: 33%;
}

.running {
	text-shadow: 2px 3px 4px rgba(0,0,0,.3);
	font-family: 'Squada One', sans-serif;
	font-size: 48px;
	text-align: center;
}

.running > span::after {
	animation: dots steps(4) 2s infinite;
	clip: rect(auto, 0, auto, auto);
	content: '...';
	display: inline-block;
	width: 36.6px;
}

#results[open] {
	height: var(--results-height) + "px";
}

#results > div:nth-of-type(2) {
	--percentSize: 24px;
	--countsSize: 14px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
}

#results > div > div {
	display: inline-block;
	width: 110px;
	line-height: 1.5;
}

#results > div > div > div:first-of-type {
	font-size: var(--percentSize);
	color: var(--darkish-tertiary-color);
}

#results .counts {
	font-size: var(--countsSize);
	color: var(--darkish-tertiary-color);
}

.result.very-good, .result.good {
	color: var(--good-color);
}

.result.fair, .result.bad {
	color: var(--fair-color);
}

.result.very-bad {
	color: var(--bad-color);
}

#packetLossTitle {
	display: inline-block;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	left: calc(20vw);
}

#packetLoss {
	--totalPacketLossScale: 1.8;
	font-size: calc(100% * 0.8 * var(--totalPacketLossScale));
	width: 205px !important;
	display: none !important;
}

#packetLoss > div:first-of-type {
	font-size: calc(var(--percentSize) * var(--totalPacketLossScale)) !important;
}

#packetLoss .counts {
	font-size: calc(var(--countsSize) * var(--totalPacketLossScale));
}

#results p+p {
	margin-top: -10px;
}

#chartContainer {
	height: 300px;
}

hr {
	border: none;
	background: var(--dark-primary-color);
	height: 1px;
}

footer {
	background-color: var(--light-grey-color);
	bottom: 0;
	color: var(--text-color);
	font-size: 15px;
	left: 0;
	line-height: 1.7;
	margin-top: 10px;
	padding: 5px;
	position: absolute;
	right: 0;
	text-align: center;
}

footer > :not(:first-child) {
	/* margin-top: 10px; */
}

.left {
	clear: left !important;
	float: left;
}

.right {
	float: right;
}