source ⟩ hypertext ⟩ public ⟩ films ⟩ films.css

:root {
	--background: #020806;
	--text: #cfd;
	--accent: #0f7;
}

body {
	background: url("/films/fabric.png"), var(--background);
}

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

main > h1 {
	margin-bottom: 0;

	font-size: min(2.5rem, 11.5vw);
	font-weight: 900;
}

nav.languages {
	margin-bottom: 2rem;

	font-family: "Cooper*", "Cooper", var(--sans-serif);
}

h1,
h2,
ul.details,
label,
.page-footer {
	font-family: "Cooper*", "Cooper", var(--sans-serif);
	text-shadow: 0 0 5px var(--accent-translucent);
}

ol.films {
	inline-size: fit-content;
	margin-inline: auto;
}

ol.films > li {
	display: grid;
	grid-template-columns: auto min(70ch, 65vw);
	gap: 1rem;

	margin-bottom: 2rem;
}

ol.films > li > img,
ol.films > li > video {
	justify-self: end;

	max-height: 10em;
	max-inline-size: 100%;
	margin-block: 0;
	margin-inline: 0;

	border: 1px solid var(--accent-seethrough);
	border-radius: 5px;
	box-shadow: 0 2px 16px black;
}

ol.films > li > article > h1 {
	margin-block: 0 0.5rem;

	text-align: start;
}

ol.films > li > article > h1 .marker {
	font-weight: normal;
}

i.translation {
	font-weight: normal;
}

ul.details {
	display: flex;
	flex-wrap: wrap;

	column-gap: 1em;

	color: var(--accent);
	font-size: 0.9em;
	font-style: italic;
}

img.flag {
	border-color: currentColor;
}

.icon {
	font-family: "Noto Emoji", var(--serif);
	font-size: 0.9em;
	font-style: normal;
}

ol.films p,
blockquote.epigram {
	text-shadow: 1px 1px #fff3, -1px -1px black;
}

blockquote.epigram {
	margin-block: 1em 0;
	margin-inline: 0;
	padding: 0;

	font-size: 1em;

	font-style: italic;
}

.epigram em {
	text-decoration: 1px solid underline var(--accent);
}

details {
	padding-block: 0.25em;
	padding-inline: 1em;

	background-color: var(--accent-seethrough);
	border: none;
	border-radius: 5px;
	
	& summary {
		padding: 0;

		font-family: "Cooper*", "Cooper", var(--sans-serif);
		font-weight: bold;
		text-align: start;
	}

	& > :not(summary) {
		padding-inline: initial;
	}
}

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

@media only screen and (max-width: 800px) {
	main {
		padding: 2ch;
	}

	ol.films > li {
		display: block;
	}

	ol.films > li > img,
	ol.films > li > video {
		max-height: 12.5em;
		margin-block-end: 1em;
		margin-inline: auto;
	}
}

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

@font-face {
	font-family: "Cooper*";
	src: url("/fonts/Cooper-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Cooper*";
	src: url("/fonts/Cooper-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Cooper*";
	src: url("/fonts/Cooper-Regular.woff2") format("woff2");
	font-weight: regular;
	font-style: normal;
	font-display: fallback;
}


@font-face {
	font-family: "Cooper*";
	src: url("/fonts/Cooper-Italic.woff2") format("woff2");
	font-weight: regular;
	font-style: italic;
	font-display: fallback;
}