@import 'https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap';

:root {
	background-color: #fff;
	color: #0e1a35;
	font-family: 'Roboto', sans-serif;
	line-height: 1.5;
}

body {
	background-image: url('/images/host-logo-light.svg');
	background-position: center 3rem;
	background-repeat: no-repeat;
	background-size: auto 75pt;
	margin: 0;
	padding-top: calc(5rem + 75pt);
}

a:link,
a:visited {
	color: #0b5940;
	text-decoration: none;
}

a:link:hover,
a:visited:hover {
	text-decoration: underline;
}

main,
footer {
	background-color: #ebf1f4;
	color: #0e1a35;
	line-height: 1.64;
	margin: 1rem auto;
	padding: 3rem;
	width: 40rem;
}

main.jumbo {
	font-size: 1.1rem;
	padding: 2rem 3rem;
}

h1 {
	font-family: 'Oxygen', sans-serif;
	margin-top: 0;
}

ul.toc {
	font-size: 1.1rem;
	list-style-type: none;
	margin: 1rem 0;
	padding: 0 2rem;
}

ul.toc li {
	margin: 0.5rem 0;
}

table {
	border-collapse: collapse;
	font-size: 0.9rem;
}

thead {
	background-color: #b0b5b7;
}

tr {
	border-color: #b0b5b7;
	border-width: 1px;
}

tbody tr {
	border-style: solid none;
}

td,
th {
	padding: 0.5rem;
}

th {
	text-align: left;
}

code,
pre {
	color: #203b79;
	font-family: 'Roboto Mono', monospace;
	font-size: 0.9em;
}

.url {
	font-size: 1.25rem;
	font-weight: bold;
	margin: 2rem 0;
	text-align: center;
}

footer {
	background-color: #0b5940;
	color: #fff;
}

footer a:link,
footer a:visited {
	color: inherit;
	text-decoration: underline;
}

.impersonate {
	margin: 1.5rem 0;
	text-align: center;
}

@media print {
	.impersonate {
		display: none;
	}
}

.impersonate a:not(:last-child)::after {
	content: ' / ';
}

.impersonate a.active {
	font-weight: bold;
}

@media (prefers-color-scheme: dark) {
	:root {
		background-color: #000;
		color: #ebf1f4;
		color-scheme: dark;
	}

	body {
		background-image: url('/images/host-logo-dark.svg');
	}

	a:link,
	a:visited {
		color: #9dbdb3;
	}

	main {
		background-color: #0e1a35;
		color: #ebf1f4;
	}

	thead {
		background-color: #203b79;
	}

	tr {
		border-color: #203b79;
	}

	code,
	pre {
		color: #b0b5b7;
	}

	footer {
		background-color: #062d20;
		color: #fff;
	}
}