:root {
	--black: black;
	--blue: #267dd4;
	--blue-dim: #89b8e7;
	--blue-light: #8ebce8;
	--grey: #f5f5f5;
	--grey-light: #fcfcfc;
	--red: crimson;
	--red-dim: #eb7f95;
	--silver: silver;
	--white: white;

	--radius: .5em;
}

::placeholder {
	color: var(--blue-dim);
}

* {
	margin: 0;
	padding: 0;
	font: bold small-caps 1.075rem Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
	white-space: normal;
}

html {
	padding: 0 1em;
	background: fixed linear-gradient(to bottom, var(--blue), var(--blue-light));
}

body > div {
	margin: 1em auto;
	max-width: 24em;
	padding: 1em 1.5em;
	white-space: nowrap;
	background: var(--white);
	border: 1px solid var(--black);
	border-radius: var(--radius);
}

button {
	min-width: 4.2em;
	margin-bottom: .5em;
	padding: .5em;
}

footer {
	margin-bottom: .5em;
	text-align: center;
}
	footer a {
		color: var(--grey);
		font-size: .75rem;
		text-decoration: none;
	}

h1 {
	margin-bottom: .5em;
	font-size: 1.5em;
	color: var(--blue);
	text-align: center;
}
	body > h1 {
		margin-top: .5em;
		font-size: 2em;
		color: var(--white);
	}

input {
	width: 2.5em;
	margin: .5em 0;
	padding: .125em .25em;
	background: var(--grey-light);
	color: var(--blue);
	border: none;
	border-bottom: 1px solid var(--silver);
	border-radius: calc(.4 * var(--radius));
	text-align: center;
	outline: none;
	-moz-appearance: textfield;
}
	input.current {
		background: var(--grey);
		border-bottom: 1px solid dimgray;
	}
	input::-webkit-inner-spin-button,
	input::-webkit-outer-spin-button {
		-webkit-appearance: none;
	}

#adjust {
	position: fixed;
	top: 6em;
	right: calc(-1 * var(--radius));
	padding: 0 calc(.75 * var(--radius)) 0 0;
}
	#adjust > div {
		padding: .75em;
		color: var(--red-dim);
		text-align: right;
		border-radius: 0 0 0 var(--radius);
		cursor: pointer;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
		#adjust > div:hover {
			background: var(--grey);
		}
		#adjust > div:first-of-type {
			color: var(--blue-dim);
			border-bottom: 1px solid var(--black);
			border-radius: var(--radius) 0 0 0;
		}

#distance,
#speed {
	width: 3em;
}

#result > div {
	display: inline-block;
	white-space: nowrap;
}

#result input,
#stopwatch-time.running {
	color: var(--red);
}
#result ::placeholder,
#stopwatch-time {
	color: var(--red-dim);
}

#split-times,
#date-diff {
	color: var(--red);
}

#start-field,
#end-field {
	min-width: 8em !important;
}

#toast {
	display: none;
	max-width: 16.5em;
	position: fixed;
	bottom: 1.5em;
	left: 0;
	right: 0;
	margin: auto;
	background-color: var(--black);
	font-size: .9em;
	color: var(--white);
	border-color: var(--white);
}
	#toast.show {
		display: block;
	}

.copiable {
	cursor: copy;
}

.sep {
	padding: 0 .75em;
}