source ⟩ hypertext ⟩ public ⟩ loanwords ⟩ loanwords.css

:root {
	--background: #1a1713;
	--text: #fffe;
	--accent: #ceb98e;
}

main {
	max-inline-size: none;
}

h1 {
	font-weight: normal;
}

h2,
h3,
h4,
h5 {
	margin-block: 0;

	font-weight: normal;
	text-align: center;
}

h2 {
	margin-block: 0.167em;
	margin-inline-end: -0.667ch;
	font-size: 1.667rem;
	letter-spacing: 0.667ch;
	text-transform: uppercase;
}

.speakers-subtitle {
	margin-block-start: -0.5em;
	
	font-variant-numeric: lining-nums;
	font-weight: normal;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;

	&:lang(ar) {
		letter-spacing: 0;
	}
}

h3 {
	font-size: 1.444rem;
}

h4 {
	font-size: 1.222rem;
	font-style: italic;
}

table {
	margin-inline: auto;
}

tr:not(.legend) {
	--hue-stop: 0;
	--accent: oklch(80% 0.1 calc(360 * var(--hue-stop) / 14));
	--accent-seethrough: oklch(25% 0.05 calc(360 * var(--hue-stop) / 14));

	padding-inline: 2.5ch;

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

tr:not(.legend):nth-child(even) {
	--accent-seethrough: oklch(30% 0.05 calc(360 * var(--hue-stop) / 14));
}

tr.indo-european {
	--hue-stop: 0;
}

tr.sino-tibetan {
	--hue-stop: 1;
}

tr.niger-congo {
	--hue-stop: 2;
}

tr.afro-asiatic {
	--hue-stop: 3;
}

tr.austronesian {
	--hue-stop: 4;
}

tr.dravidian {
	--hue-stop: 5;
}

tr.kra-dai {
	--hue-stop: 6;
}

tr.uralic {
	--hue-stop: 7;
}

tr.algic {
	--hue-stop: 8;
}

tr.inuit-yupik-unangan {
	--hue-stop: 9;
}

tr.pama-nyungan {
	--hue-stop: 10;
}

tr.muscogean {
	--hue-stop: 11;
}

tr.salishan {
	--hue-stop: 12;
}

tr.other {
	--hue-stop: 13;
}

td,
th {
	line-height: 1.2;
	padding-block: 0.5ch;
	padding-inline: 1ch;
}

td {
	vertical-align: top;
}

th {
	text-align: start;
}

td.language,
td.english-word,
td.original-word {
	hyphens: none;
}

td.language {
	color: var(--accent);
	font-weight: bold;
	white-space: nowrap;
}

td.language small {
	display: block;

	color: var(--text);
	font-weight: normal;
}

td.etymology {
	padding-block-start: 0.125rem;
	font-size: 0.875rem;
}

@media only screen and (max-width: 700px) {
	tr:not(.legend) :is(td, th) {
		display: block;
	}

	tr.legend {
		display: none;
	}

	td.language small {
		display: inline;
		margin-inline-start: 1em;
	}

	tr td.english-word,
	tr td.original-word {
		display: inline;
		font-size: 1.25em;
	}

	td.original-word {
		padding-inline-start: 0;
	}

	td.original-word::before {
		content: "←";
		margin-inline-end: 1ch;
	}

	td.meaning,
	td.etymology {
		text-align: end;
	}
}

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

@media only screen and (max-width: 450px) {
	main {
		padding: 0;
	}

	h2 {
		font-size: 1.5rem;
	}

	td.language small {
		display: block;
	}
}