source ⟩ hypertext ⟩ public ⟩ predictions ⟩ 2023 ⟩ 2023.css

:root {
	--fraktur: UnifrakturMaguntia, UnifrakturCook, var(--serif);
	--accent: gold;

	font-size: 1.333rem;
}

blockquote,
small {
	font-size: 1em;
}

#body-container {
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: 1fr;

	max-inline-size: none;
	inline-size: 100%;
	margin: 0;
	padding: 0;

	hyphens: none;
}

#body-container > header {
	text-align: center;

	background: linear-gradient(to bottom, #26075b, #0946a2);
	color: white;
	--accent: currentColor;

	z-index: 50;
	box-shadow: 0 1em 1em #0946a2;
}

#body-container > header > h1 {
	font-family: var(--fraktur);
	font-weight: normal;
	margin-block: 1rem;
}

.star {
	color: gold;
	text-shadow: 0 0 0.5rem gold;

	font-size: 0.6em;
	vertical-align: middle;
}

#body-container > header table {
	margin: auto;
	font-family: var(--fraktur);
	margin-bottom: 1em;
}

#body-container > header table th {
	text-align: left;
}

#body-container > header table :is(th, td) {
	padding-inline: 0.5em;
}

#body-container > header table th {
	font-weight: normal;
}

#body-container > header table th img.flag {
	font-family: var(--serif);
}

#body-container > figure {
	background: url("/predictions/2023/leaves.png");
}

img {
	margin-block: 0;
}

#body-container > main {
	background: url("/cosmetics/bgvignette.png"), url("/predictions/2023/tapestry.png");
	background-size: 100% 100%, auto;

	max-inline-size: none;
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

div#main {
	max-width: 80ch;
	margin-inline: auto;
}

div#main > blockquote {
	background-color: white;
	color: black;
	--accent: purple;
	margin-inline: 0;

	font-style: italic;
	font-family: var(--sans-serif);

	box-shadow: 0 0.125em 0.25em black;

	padding: 0.667rem;
	padding-block: 0.333rem;
	border-radius: 0.333rem;

	max-width: min(80%, 52.5ch);
	width: fit-content;
	line-height: 1.1;
}

div#main > blockquote strong {
	text-transform: uppercase;
	font-style: normal;
}

div#main > blockquote.ryder {
	text-align: right;
	margin-left: auto;

	--accent: #840d6b;
	color: #1e0319;
	background-color: #f4dcef;
}

div#main > blockquote.reader {
	--accent: #405113;
	color: #0e1104;
	background-color: #e8f4ba;
}

h2 {
	color: gold;
	text-shadow: 0 0 0.25em gold;

	text-align: center;
	font-family: var(--fraktur);
	font-weight: normal;
	font-size: 2em;
}

.card {
	max-width: 70ch;
	background: url("/bandnames/beige-paper.png"), #f8f0e0;
	color: #221e17;
	--accent: #221e17;

	padding: 1em;

	margin-inline: auto;
	margin-block: 2em;

	text-shadow: -0.5px -0.5px #221e1711, 1px 1px #fff8;

	box-shadow: 0 0.25em 1em black;

	transform: rotate(1deg);
}

.card:nth-child(even) figure {
	flex-direction: row-reverse;
}

.card:nth-child(4n + 1) {
	transform: rotate(-1.5deg);
}

.card:nth-child(4n + 2) {
	transform: rotate(-0.5deg);
}

.card:nth-child(4n + 3) {
	transform: rotate(2deg);
}

.card figure {
	display: flex;
	padding: 1em;
	gap: 1em;
	border: 2px solid;
	border-radius: 1em;
	align-items: center;
}

.card figure img {
	margin: 0;
	max-width: 10em;
	max-height: 10em;
	aspect-ratio: 1 / 1;
	mix-blend-mode: multiply;
}

.card figcaption {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

.card figcaption strong {
	line-height: 1;
	font-size: 1.667em;
	font-family: var(--fraktur);
	font-weight: normal;
}

.card figcaption small {
	font-size: 0.85em;
	font-style: italic;
}

.card figcaption small i {
	font-style: normal;
}

.mark {
	font-family: var(--sans-serif);
	font-size: 0.8em;
	line-height: 1.1;
}

.mark.correct {
	color: #2e8367;
}

.mark.mixed {
	color: #bc8521;
}

.mark.wrong {
	color: #d83933;
}

.card figure .mark img {
	display: inline;
	width: 1em;
	vertical-align: middle;
	margin-inline-end: 1ch;
}

.antiqua {
	font-family: var(--serif);
	display: inline-block;
	translate: 0 -0.0333em;
}

footer small {
	display: block;
	line-height: 1.25;
	font-style: normal;
}

.comment-section {
	margin-inline: auto;
	max-width: 60ch;
	padding-inline: 0.5em;
	box-sizing: border-box;
}

#toggle {
	font-family: var(--sans-serif);
	font-weight: bold;
	border: none;
	padding-block: 0.25em;
	margin: 0.5em;
	border-radius: 0.25em;

	margin-inline: auto;

	text-align: center;
	display: block;

	color: #1e0319;
	background-color: #f4dcef;
	box-shadow: 0 0.125em 0.25em black;
}

@media only screen and (max-width: 600px) {
	.card figure {
		flex-direction: column !important;
	}

	.card figure img {
		max-height: none;
		max-width: min(15em, 100%);
	}

	h1 {
		font-size: 7.75vw;
	}

	.card figcaption strong {
		font-size: clamp(1.25rem, 6vw, 1.667rem);
	}
}

@font-face {
	font-family: "EB Garamond MF Unicode";
	src: url("/fonts/EB_Garamond_MF_Unicode_Italic.woff2") format("woff2"),
		url("/fonts/EB_Garamond_MF_Unicode_Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "EB Garamond MF Unicode";
	src: url("/fonts/EB_Garamond_MF_Unicode.woff2") format("woff2"),
		url("/fonts/EB_Garamond_MF_Unicode.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Alegreya Sans MF";
	src: url("/fonts/alegreyasans-bold.woff2") format("woff2"),
		url("/fonts/alegreyasans-bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Alegreya Sans MF";
	src: url("/fonts/alegreyasans-italic.woff2") format("woff2"),
		url("/fonts/alegreyasans-italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "UnifrakturMaguntia";
	src: url("/fonts/unifrakturmaguntia.woff2") format("woff2"),
		url("/fonts/unifrakturmaguntia.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}