:root {
	--s0: 0.2rem;
	--s1: 0.6rem;
	--s2: 1.4rem;

	--fg: #000000;
	--fg-light: #555555;
	--bg: #eeeeee;
	--bg-box: #ffffff;

	--accent: #d0edb2;

	--good: #99dc83;
	--okay: #eed462;
	--dangerous: #e78181;

	--radius: 24px;
}

html {
	box-sizing: border-box;

	color: var(--fg);
	background-color: var(--bg);
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	font-family:
		Merriweather Sans,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

header {
	background-color: var(--bg-box);
	display: flex;
	font-size: 1.4em;
	font-weight: bold;
}

header>.name {
	padding: var(--s2) var(--s2);
	margin-inline: auto;
	width: 100%;
	max-width: 1200px;
}

header>.name>a {
	color: unset;
	text-decoration: none;
}

h1 {
	margin-block-start: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 2.5rem;
}

:is(h1, h2, h3, h4, h5, h6) {
	text-align: center;
	font-weight: 900;
}

main {
	width: 100%;
	max-width: 1200px;
	flex-grow: 1;
	margin: var(--s2) auto;
	padding: var(--s2);

	/* display: flex; */
	/* flex-direction: column; */
	/* gap: var(--s2); */
}

footer {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--s2);
	padding-block-start: 0;
}

.box {
	padding: var(--s2);
	background-color: var(--bg-box);
	/* border: 1px solid var(--fg); */
	box-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));

	border-radius: var(--radius);
}

.box :is(h1, h2, h3, h4, h5, h6) {
	text-align: initial;
	margin-block: 0;
}

:is(h1, h2, h3, h4, h5, h6)>a {
	color: var(--fg);
}

.subheading {
	display: block;
	margin-block-start: calc(-1 * var(--s2));
	text-transform: capitalize;
}

.description {
	text-align: center;
}

.changes {
	display: grid;
	grid-gap: var(--s2);
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.change-header {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) fit-content(100%);
	grid-template-rows: 1fr 1fr;
	justify-items: left;
	column-gap: var(--s1);
}

.change-header>h2 {
	margin-block: 0;
}

.change-header>*:nth-child(2) {
	color: var(--fg-light);
	text-align: right;
	grid-column: 2;
	grid-row: 1 / 3;
}

.opening-hours-diff {
	display: grid;
	gap: var(--s1);
	grid-template-columns: fit-content(100%) minmax(auto, 1fr) minmax(auto, 1fr);
	grid-template-rows: max-content 1fr 1fr max-content;
}

.opening-hours-diff>.opening-hours {
	background-color: var(--bg);
	padding: var(--s1);
	border-radius: calc(var(--radius) / 2);
	overflow-x: scroll;
	text-wrap-mode: nowrap;
}

label {
	font-weight: bold;
}

.osm-region, .osm-state {
	font-weight: bold;
}

.classification {
	margin-block-start: var(--s1);
	padding: var(--s1);
	border-radius: calc(var(--radius) / 2);
}

.classification.good {
	background-color: var(--good);
}

.classification.okay {
	background-color: var(--okay);
}

.classification.dangerous {
	background-color: var(--dangerous);
}

.stats {
	display: grid;
	margin-block: var(--s2);
	grid-auto-flow: column;
	grid-template-rows: auto auto;
	text-align: center;
}

.stats-value {
	font-size: 2rem;
	font-weight: bold;
}

.paging {
	margin-block: var(--s2);
	margin-inline: auto;
	display: flex;
	flex-direction: row;
	width: fit-content;
}

.paging>* {
	padding: var(--s1);
}