source ⟩ hypertext ⟩ public ⟩ maps ⟩ maproom.css

:root {
	--background: #fef2e5;
	--text: #28161c;
	--accent: var(--text);

	--shadow: 0 0.125rem 0.5rem #000;
}

body {
	font-family: "Libertinus Sans", "Linux Biolinum", var(--gill-sans);

	background-image: url("/maps/background.png");
	background-color: #fef2e5;
	background-repeat: repeat;
	background-size: auto;
}

.raster.otl {
	background-color: #e0f3f8;
}

.vector.otl {
	background-color: #abd9e9;
}

.not-mine.otl {
	background-color: #74add1;
}

.raster.atl {
	background-color: #ffffbf;
}

.vector.atl {
	background-color: #fee090;
}

.not-mine.atl {
	background-color: #fdae61;
}

main {
	max-inline-size: none;
}

h1 {
	max-inline-size: 32.5rem;
	margin-block: 0 1rem;
	margin-inline: auto;
	padding-block: 0.25rem;

	background-color: var(--background);
	box-shadow: var(--shadow);
}

div#introduction {
	max-inline-size: 32.5rem;
	margin-inline: auto;
	padding-block: 0.25em;
	padding-inline: 1em;

	background-color: var(--background);
	box-shadow: var(--shadow);
}

footer.page-footer {
	max-inline-size: 32.5rem;
	margin-block-end: 1rem;
	margin-inline: auto;
	padding-block: 0.25em;

	background-color: var(--background);
	box-shadow: var(--shadow);
}

div.comment-section {
	max-inline-size: 32.5rem;
	margin-inline: auto;
	padding-block: 0.25em;
	padding-inline: 0.5em;

	background-color: var(--background);
	box-shadow: var(--shadow);
}

figure > a::after {
	display: none !important;
}

div#map-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
	gap: 1rem;

	margin-block: 1rem;
}

section#legend {
	background-color: var(--background);
}

section#legend,
.frame {
	align-self: start;

	padding: 1ch;

	box-shadow: var(--shadow);

	& h2 {
		margin-block: 0;

		& small {
			font-size: 1em;
			font-weight: normal;
		}
	}

	& figure > a > img,
	& figure > img {
		max-block-size: 40ch;
		margin-block: 1rem 0;
	}

	& figcaption {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		& .frame-time {
			font-weight: bold;
		}

		& .frame-size {
			font-style: italic;
		}
	}

	& .frame-description {
		font-size: 0.9em;
	}
}

#legend-table {
	inline-size: 100%;

	& tbody th {
		font-weight: normal;
		text-align: start;
	}
}

#legend p {
	margin-block-end: 0;
}

.text-emoji {
	font-family: "Noto Emoji", sans-serif;
}

@media screen and (max-width: 500px) {
	div#map-grid {
		display: flex;
		flex-direction: column;
	}

	section#legend, .frame {
		align-self: stretch;
	}
}

@font-face {
	font-family: "Libertinus Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Libertinus Sans"),
		url("/fonts/LibertinusSans-Regular.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Libertinus Sans";
	font-style: normal;
	font-weight: 700;
	src: local("Libertinus Sans Bold"),
		url("/fonts/LibertinusSans-Bold.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Libertinus Sans";
	font-style: italic;
	font-weight: 400;
	src: local("Libertinus Sans Italic"),
		url("/fonts/LibertinusSans-Italic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Noto Emoji";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/NotoEmoji.woff2") format("woff2");
	font-display: fallback;
}