source ⟩ hypertext ⟩ public ⟩ 100 ⟩ films ⟩ 100films.css

:root {
	--background: black;
	--text: white;
	--accent: white;
	--accent-translucent: transparent;
	--accent-seethrough: transparent;
}

body {
	max-inline-size: 100%;

	font-family: "Noto Sans VF", "Noto Sans", var(--sans-serif);
	font-stretch: extra-condensed;
}

main {
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

a#outlink {
	display: block;
	text-align: center;
	margin-inline: auto;
}

footer,
.centred,
.comment-section {
	max-inline-size: 75ch;
	margin-inline: auto;
}

.comment-section input,
.comment-section select,
.comment-section textarea {
	font-stretch: extra-condensed;
}

#sorter {
	margin-bottom: 1em;
	text-align: center;
}

#sorter > button {
	margin-inline-start: 1em;

	font-stretch: extra-condensed;

	border: 1px solid grey;
	border-radius: 1ch;
}

#sorter > button:hover, #sorter > button:focus {
	border-color: white;
}

ol.no-list.films {
	display: flex;
	flex-wrap: wrap;
	gap: 1ch;
	justify-content: space-between;

	padding-inline: 1em;
}

ol.films > li {
	margin-block-end: 2em;
}

ol.films > li > figure > img {
	max-height: 22.5ch;
	margin-block: 0;
}

strong.title {
	font-size: 1.1em;
}

.translated {
	font-size: 0.8em;
}

.marker,
.translated {
	font-weight: normal;
}

ul.no-list.details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;

	font-size: 0.85em;
}

img.flag {
	border: none;
}

@font-face {
	font-family: "Noto Sans VF";
	src: url("/fonts/NotoSans-VF.woff2") format("woff2-variations");
	font-style: normal;
	font-weight: 200 900;
	font-stretch: 66% 100%;
}