@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

body {
	font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
	color: #222;
	background-color: #fff;
}
body a { color: #900; }

div#page {
	margin: 0 auto;
	max-width: 60em;
	padding: 0 0.75em;
}
div#page ul { padding: 0; }
div#page li { list-style-type: none; }

div#page :lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
div#page :lang(pt) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
div#page :lang(zh) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
div#page :lang(ar) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
div#page :lang(fr) > q { quotes: '\00AB\00A0' '\00A0\00BB' '\201C' '\201D'; }
div#page :lang(it) > q { quotes: '\00AB' '\00BB' '\201C' '\201D'; }
div#page :lang(ru) > q { quotes: '\00AB' '\00BB' '\201C' '\201D'; }
div#page :lang(es) > q { quotes: '\00AB' '\00BB' '\201C' '\201D'; }
div#page :lang(de) > q { quotes: '\201E' '\201C' '\201A' '\2018'; }
div#page :lang(ja) > q { quotes: '\300C' '\300D' '\300E' '\300F'; }
div#page q:before { content: open-quote; }
div#page q:after { content: close-quote; }

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-style: normal;
	color: #222;
	text-rendering: optimizeLegibility;
	margin-bottom: 0.5em;
	line-height: 1.2125em;
}

blockquote {
	padding: 0.5em;
	margin: 2em 0;
}

section#content li { margin-bottom: 1em; }
section#content blockquote q,
section#content blockquote cite,
section#content ul.linklist,
section#content ul#homenav { font-size: 1.5em; }
section#content blockquote { background-color: #eee; }
section#content blockquote footer {
	font-family: sans-serif;
	margin-top: 2em;
	font-weight: normal;
}

#bigfoot { margin-top: 4em; }
#bigfoot blockquote { font-family: sans-serif; }

cite { display: block; margin-top: 0.5em; }
cite:before { content: '\2014\00A0'; }

nav {
	display: block;
	font-family: sans-serif;
	padding: 5px 0;
}
nav a { margin-right: 1em; }
nav ul { margin: 0; }
nav ul li { display: inline; }
#nav li a, #langforms li a { text-decoration: underline; }

h1 { font-size: 2.5em; }
#bighead h1 { margin-top: 0; font-weight: normal; }
#bighead h1 a { text-decoration: none; }
#bighead h2 { font-weight: normal; }

label, input, textarea { font-family: sans-serif; }
label, p { display: block; font-size: 1.3em; }
input, textarea { font-size: 1.5em; margin-bottom: 1em; display: block; }

img { max-width: 100%; height: auto; }
small { font-size: 0.6em; }
section#content ul.linklist small { color: #666; }

/* --- the saying in its own language, under the English --- */
.original {
	font-style: italic;
	color: #555;
	margin: 0.35em 0 0;
	font-size: 1.15em;
}
section#content blockquote .original { font-size: 1.15em; }

/* --- add a thought --- */
p.hint, p.callout {
	font-family: sans-serif;
	font-size: 0.95em;
	color: #555;
}
p.callout {
	background-color: #eee;
	padding: 0.75em;
	font-size: 1em;
}
p.callout a { color: #900; }

#addform textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
#addform input[type=text],
#addform input[type=url] { width: 100%; max-width: 100%; box-sizing: border-box; }
#addform label { margin-top: 0.75em; font-size: 1.1em; }
#addform label em { color: #666; font-weight: normal; }
#addform p.hint { margin-top: -0.6em; }
#addform input[type=submit] {
	font-size: 1.2em;
	padding: 0.4em 1.2em;
	cursor: pointer;
}
#addform .bad { outline: 2px solid #900; }

a.bigbutton {
	font-family: sans-serif;
	display: inline-block;
	margin: 0 0.75em 0.75em 0;
	padding: 0.5em 1em;
	background-color: #eee;
	border: 1px solid #ccc;
	text-decoration: none;
	font-size: 1.05em;
}
a.bigbutton:hover { background-color: #e0e0e0; }
a.bigbutton[hidden] { display: none; }

#addjson {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background-color: #eee;
	padding: 1em;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}
#addpreview h2 { font-size: 1.4em; margin-top: 1.5em; }

/* --- search results --- */
#results p { font-family: sans-serif; font-size: 1.05em; color: #555; }

/* --- the contributor board: rank is your count, nothing else --- */
ol.board {
	list-style: none;
	padding: 0;
	margin: 1.5em 0;
	border-top: 2px solid #222;
}
ol.board li.place {
	display: grid;
	grid-template-columns: 2.2em 1fr auto;
	grid-template-areas: "rank who count" ". note note";
	align-items: baseline;
	gap: 0.1em 0.6em;
	padding: 0.7em 0.5em;
	border-bottom: 1px solid #ddd;
	margin: 0;
}

ol.board .rank {
	grid-area: rank;
	font-size: 1.6em;
	line-height: 1;
	color: #bbb;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
ol.board .who  { grid-area: who; font-size: 1.5em; }
ol.board .count {
	grid-area: count;
	font-size: 1.5em;
	font-variant-numeric: tabular-nums;
}
ol.board .note {
	grid-area: note;
	font-family: sans-serif;
	font-size: 0.82em;
	color: #888;
}

/* the podium reads at a glance */
ol.board li.p1 {
	background-color: #eee;
	border-bottom-color: #bbb;
	padding-top: 1em;
	padding-bottom: 1em;
}
ol.board li.p1 .rank  { color: #900; font-size: 2.2em; font-weight: bold; }
ol.board li.p1 .who   { font-size: 1.9em; font-weight: bold; }
ol.board li.p1 .count { font-size: 1.9em; font-weight: bold; }
ol.board li.p1 .note  { color: #900; }

ol.board li.p2 .rank, ol.board li.p3 .rank { color: #666; font-size: 1.9em; }
ol.board li.p2 .who,  ol.board li.p3 .who  { font-size: 1.7em; }
ol.board li.p2 .count, ol.board li.p3 .count { font-size: 1.7em; }

/* the seed collection is labelled, but it still has to be beaten */
ol.board li.seed .who:after {
	content: " (the archive)";
	font-family: sans-serif;
	font-size: 0.5em;
	color: #888;
	white-space: nowrap;
}

p.totake {
	font-family: sans-serif;
	font-size: 1.15em;
	background-color: #eee;
	padding: 0.85em;
	margin-top: 1.5em;
}
p.totake strong { font-size: 1.25em; color: #900; }

@media (max-width: 30em) {
	ol.board li.place { grid-template-columns: 1.8em 1fr auto; }
	ol.board .who, ol.board .count { font-size: 1.2em; }
	ol.board li.p1 .who, ol.board li.p1 .count { font-size: 1.4em; }
	ol.board li.p1 .rank { font-size: 1.8em; }
}

/* --- search results --- */
#results p { font-family: sans-serif; font-size: 1.05em; color: #555; }