@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src:
		url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.0/files/jetbrains-mono-latin-400-normal.woff2) format('woff2'),
		url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.0/files/jetbrains-mono-latin-400-normal.woff) format('woff');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src:
		url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.0/files/jetbrains-mono-latin-700-normal.woff2) format('woff2'),
		url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.0/files/jetbrains-mono-latin-700-normal.woff) format('woff');
}

:root {
	--bg-color: #282a36;
	--primary-color: #ffd4e2;
	--secondary-color: #d5849e;
	--section-border: 1px solid #b9adb6;
	--section-margin: 22px;
	--section-inner-margin: 22px;
	--section-outer-margin: calc(var(--section-inner-margin) * 2);
	--section-padding: 10px;
}

::selection {
	background: var(--secondary-color);
	color: var(--bg-color);
}

body {
	background: var(--bg-color);
	color: var(--primary-color);
	font-family: 'JetBrains Mono', monospace;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0 15px;
}

@media(min-width: 992px) {
	body {
		width: 970px;
	}
}

header {
	border-bottom: var(--section-border);
	margin: var(--section-outer-margin) 0 var(--section-inner-margin);
	padding-bottom: var(--section-padding);
}

footer {
	border-top: var(--section-border);
	margin: var(--section-inner-margin) 0 var(--section-outer-margin);
	padding-top: var(--section-padding);
}

h1 {
	color: var(--secondary-color);
	line-height: 1.2;
	margin-bottom: 11px;
	margin-top: 22px;
	font-size: 3rem;
}

p {
	margin: 0 0 11px;
}

ul {
	/* margin-bottom: 11px; */
	margin-top: 0;
}

th {
	color: var(--secondary-color);
}

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

a:focus, a:hover {
	color: var(--primary-color);
}

strong {
	font-weight: bold;
}

.pull-right {
	float: right;
}

.center {
	margin: 0 auto;
}

#plant {
	display: flex;
	gap: 1em;
}

#current-plant-stats {
	display: block;
}

.plant-stats th:first-child {
	padding-right: 1em;
	text-align: right;
}

.plant-stats th:not(:first-child) {
	text-align: left;
}

#webring {
	font-size: 13px;
	text-align: center;
}