@font-face {
	font-family: Rubik;
	src: url("/spacetrash/font/Rubik-wght.ttf");
}
html {
	font-family: Rubik, sans-serif;
}
body {
	color: #222;
	margin: 0;
}
main {
	width: 80%;
	min-width: 360px;
	max-width: 600px;
	margin: auto;
}

hr {
	height: 0px;
	border: none;
	border-top: 2px solid #ddd;
}

/* by defualt, links are indicated by underlines */
a:link {
	text-decoration: underline;
	color: inherit;
}
a:visited {
	text-decoration: underline;
	color: inherit;
}
a:hover {
	text-decoration: none;
}

/* for those information summary boxes in almanac pages. if the page
   is too narrow, stack the image and table vertically instead of
   setting them side-by-side. */
@media (min-width: 560px) {
	.almanac-infobox {
		margin-top: 2em;
		margin-bottom: 2em;
		margin-left: 5%;
		margin-right: 10%;
		display: flex;
		gap: 8%;
		align-items: center;
	}
	.almanac-infobox > .right {
		flex-grow: 1;
	}
}
@media (max-width: 560px) {
	.almanac-infobox {
		margin: 2em auto;
	}
	.almanac-infobox-image {
		display: block;
		margin: 0 auto;
	}
	.almanac-infobox-header {
		text-align: center;
	}
}
.almanac-infobox-table {
	width: 100%;
	text-align: left;
}
.almanac-infobox-header {
	border-bottom: 2px solid;
	padding: 0.4em 0;
}
/* evil trick for vertical space below table header */
.almanac-infobox-table > tbody::before {
	content: "";
	display: block;
	height: 0.4em;
}
.almanac-infobox-table > tbody {
	font-size: smaller;
}
/* lists in infoboxes are just displayed as lines of text with no special styling. */
.almanac-infobox-table ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.almanac-infobox-table > tbody th {
	text-transform: uppercase;
	width: 112px;
}

/* header components. the crumbs link get a highlight format similar
   to to the actual links in the articles */
.site-header > a {
	text-decoration: none;
}
nav.crumbs ol {
	list-style: none;
}
nav.crumbs li {
	display: inline;
}
nav.crumbs a:link {
	text-decoration: none;
	color: #666;
}
nav.crumbs a:hover {
	color: #fff;
	background-color: #666;
}
nav.crumbs li + li::before {
	content: "/ ";
}

.link-list {
	list-style: none;
}
.link-list li {
	margin: 0.25em 0;
}

/* blockquote */
blockquote {
	margin: 0;
	border-left: 4px solid #ddd;
	padding-left: 0.8em;
}

/* almanac links have their own highlighting format. special articles
   (characters, locations, etc.) get individual colours/decorations;
   see make.pl.*/
.special-link:link { text-decoration: none; }
.special-link:hover > span { color: #fff; }
.special-link-default > span { color: #666; }
.special-link-default:hover > span { background-color: #666; }

/* work-in-progress banner */
.wip {
	padding: 1em 10%;
	color: #f83;
	border: 2px solid #f83;
}
.special-link-phathon::before { content: "\01f7e4\0000a0"; }
.special-link-phathon > span { color: #b50; }
.special-link-phathon:hover > span { background-color: #b50; }
.almanac-infobox-header-phathon { color: #b50; }
.almanac-infobox-header-phathon::before { content: "\01f7e4"; }

.special-link-sui::before { content: "\0026ab\00fe0f\0000a0"; }
.special-link-sui > span { color: #222; }
.special-link-sui:hover > span { background-color: #222; }
.almanac-infobox-header-sui { color: #222; }
.almanac-infobox-header-sui::before { content: "\0026ab\00fe0f"; }

.special-link-taarel::before { content: "\002744\00fe0f\0000a0"; }
.special-link-taarel > span { color: #5af; }
.special-link-taarel:hover > span { background-color: #5af; }
.almanac-infobox-header-taarel { color: #5af; }
.almanac-infobox-header-taarel::before { content: "\002744\00fe0f"; }

.special-link-lune::before { content: "\01f7e3\0000a0"; }
.special-link-lune > span { color: #98f; }
.special-link-lune:hover > span { background-color: #98f; }
.almanac-infobox-header-lune { color: #98f; }
.almanac-infobox-header-lune::before { content: "\01f7e3"; }

.special-link-vesper::before { content: "\01f7e2\0000a0"; }
.special-link-vesper > span { color: #595; }
.special-link-vesper:hover > span { background-color: #595; }
.almanac-infobox-header-vesper { color: #595; }
.almanac-infobox-header-vesper::before { content: "\01f7e2"; }

.special-link-lagrange-5::before { content: "\01f537\0000a0"; }
.special-link-lagrange-5 > span { color: #38f; }
.special-link-lagrange-5:hover > span { background-color: #38f; }
.almanac-infobox-header-lagrange-5 { color: #38f; }
.almanac-infobox-header-lagrange-5::before { content: "\01f537"; }

.special-link-great-moon::before { content: "\01f7e1\0000a0"; }
.special-link-great-moon > span { color: #fa0; }
.special-link-great-moon:hover > span { background-color: #fa0; }
.almanac-infobox-header-great-moon { color: #fa0; }
.almanac-infobox-header-great-moon::before { content: "\01f7e1"; }

.special-link-salamander::before { content: "\01f534\0000a0"; }
.special-link-salamander > span { color: #c00; }
.special-link-salamander:hover > span { background-color: #c00; }
.almanac-infobox-header-salamander { color: #c00; }
.almanac-infobox-header-salamander::before { content: "\01f534"; }

.special-link-sabi::before { content: "\01f9f1\0000a0"; }
.special-link-sabi > span { color: #a22; }
.special-link-sabi:hover > span { background-color: #a22; }
.almanac-infobox-header-sabi { color: #a22; }
.almanac-infobox-header-sabi::before { content: "\01f9f1"; }

.special-link-phanon::before { content: "\01f7e0\0000a0"; }
.special-link-phanon > span { color: #f62; }
.special-link-phanon:hover > span { background-color: #f62; }
.almanac-infobox-header-phanon { color: #f62; }
.almanac-infobox-header-phanon::before { content: "\01f7e0"; }

.special-link-venn::before { content: "\01f4be\0000a0"; }
.special-link-venn > span { color: #445; }
.special-link-venn:hover > span { background-color: #445; }
.almanac-infobox-header-venn { color: #445; }
.almanac-infobox-header-venn::before { content: "\01f4be"; }

.special-link-pale-moon::before { content: "\0026aa\00fe0f\0000a0"; }
.special-link-pale-moon > span { color: #aaa; }
.special-link-pale-moon:hover > span { background-color: #aaa; }
.almanac-infobox-header-pale-moon { color: #aaa; }
.almanac-infobox-header-pale-moon::before { content: "\0026aa\00fe0f"; }

.special-link-pine::before { content: "\002600\00fe0f\0000a0"; }
.special-link-pine > span { color: #e80; }
.special-link-pine:hover > span { background-color: #e80; }
.almanac-infobox-header-pine { color: #e80; }
.almanac-infobox-header-pine::before { content: "\002600\00fe0f"; }

.special-link-paris::before { content: "\01f5e1\00fe0f\0000a0"; }
.special-link-paris > span { color: #8aa; }
.special-link-paris:hover > span { background-color: #8aa; }
.almanac-infobox-header-paris { color: #8aa; }
.almanac-infobox-header-paris::before { content: "\01f5e1\00fe0f"; }

.special-link-emily::before { content: "\01fab4\0000a0"; }
.special-link-emily > span { color: #495; }
.special-link-emily:hover > span { background-color: #495; }
.almanac-infobox-header-emily { color: #495; }
.almanac-infobox-header-emily::before { content: "\01fab4"; }

.special-link-placeholder::before { content: "\0000a0"; }
.special-link-placeholder > span { color: #aaa; }
.special-link-placeholder:hover > span { background-color: #aaa; }
.almanac-infobox-header-placeholder { color: #aaa; }
.almanac-infobox-header-placeholder::before { content: ""; }

.special-link-belt::before { content: "\01f536\0000a0"; }
.special-link-belt > span { color: #f62; }
.special-link-belt:hover > span { background-color: #f62; }
.almanac-infobox-header-belt { color: #f62; }
.almanac-infobox-header-belt::before { content: "\01f536"; }

.special-link-ge::before { content: "\01f535\0000a0"; }
.special-link-ge > span { color: #38f; }
.special-link-ge:hover > span { background-color: #38f; }
.almanac-infobox-header-ge { color: #38f; }
.almanac-infobox-header-ge::before { content: "\01f535"; }

.almanac-infobox-table-row-label-office::before { content: "\01f4cc\0000a0"; }
.almanac-infobox-table-row-label-likes::before { content: "\002764\00fe0f\0000a0"; }
.almanac-infobox-table-row-label-blood-type::before { content: "\01fa78\0000a0"; }
.almanac-infobox-table-row-label-born::before { content: "\01f382\0000a0"; }
.almanac-infobox-table-row-label-dislikes::before { content: "\01f494\0000a0"; }
.almanac-infobox-table-row-label-age::before { content: "\01f382\0000a0"; }