source ⟩ hypertext ⟩ public ⟩ predictions ⟩ 2024 ⟩ 2024.css

:root {
	--background: #fafafa;
	--text: #334;
	--accent: var(--text);

	--plex: "IBM Plex Sans", var(--sans-serif);
	--plex-mono: "IBM Plex Mono", Consolas, Ubuntu Mono, monospace;

	font-size: 1.15rem;
}

body {
	font-family: var(--plex);
	font-variant-numeric: initial;
}

h1,
h2 {
	font-family: var(--plex-mono);
	text-align: center;
	text-transform: uppercase;
}

code,
pre {
	font-family: var(--plex-mono);
}

#predictions-nav {
	margin-block-end: 1em;

	& table {
		margin-inline: auto;

		& td, th {
			padding-inline-end: 1ch;
		}

		& th {
			text-align: start;
		}
	}
}

.correct {
	--accent: #146947;
	--accent-light: #dbf6ed;
}
.mixed {
	--accent: #947100;
	--accent-light: #faf3d1;
}
.wrong {
	--accent: #b21d38;
	--accent-light: #f8eff1;
}
.tbd {
	--accent: #00687d;
	--accent-light: #e7f6f8;
}
.info {
	--accent-light: #e8e8ff;
}

div.prediction {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.25ch;

	margin-block-end: 1em;

	& > header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding-block: 0.25em;
		padding-inline: 0.5em;

		color: var(--background);
		font-family: var(--plex-mono);
		line-height: 1;
		text-transform: uppercase;

		background-color: var(--accent);

		& .verdict {
			flex-grow: 1;
			font-size: 1.8em;
		}

		& .serial-number {
			text-align: end;

			& b {
				color: inherit;
			}
		}
	}

	& > .prediction-contents {
		padding-inline: 1rem;

		background-color: var(--accent-light);
	}
}

svg.icon {
	margin-inline-end: 1ch;
	height: 1.667em;
	width: 1.667em;

	fill: transparent;
	stroke: currentColor;
	stroke-width: 6.25%;

	& circle.dot {
		fill: currentColor;
		stroke: transparent;
	}
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

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

@font-face {
	font-family: "IBM Plex Sans";
	src: url("/fonts/IBMPlexSans-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

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