@import url('/assets/css/base.css');
:root {
	--buttonhover: #2c2c54;
	--overlay-strong: rgba(25, 25, 52, 0.72);
	--overlay-soft: rgba(25, 25, 52, 0.35);
	--overlay-border: rgba(198, 188, 241, 0.3);
	--overlay-border-soft: rgba(198, 188, 241, 0.18);
	--header-bg: rgba(16, 14, 32, 0.88);
}
@media (prefers-color-scheme: light) {
	:root {
		--buttonhover: #c8c8e0;
		--overlay-strong: rgba(221, 221, 238, 0.72);
		--overlay-soft: rgba(221, 221, 238, 0.45);
		--overlay-border: rgba(16, 14, 37, 0.22);
		--overlay-border-soft: rgba(16, 14, 37, 0.15);
		--header-bg: #ffffff;
	}
	table:not(.archive-table) { box-shadow: 0 6px 18px rgba(16,14,37,0.18); }
	.button2 { box-shadow: 0 4px 10px rgba(16,14,37,0.15); }
	.button2:hover { box-shadow: 0 6px 14px rgba(16,14,37,0.22); }
	table:not(.archive-table) tbody tr:nth-child(7n+1) td a { color: #CB3A2A; }
	table:not(.archive-table) tbody tr:nth-child(7n+2) td a { color: #A34D14; }
	table:not(.archive-table) tbody tr:nth-child(7n+3) td a { color: #846E15; }
	table:not(.archive-table) tbody tr:nth-child(7n+4) td a { color: #14710A; }
	table:not(.archive-table) tbody tr:nth-child(7n+5) td a { color: #036A96; }
	table:not(.archive-table) tbody tr:nth-child(7n+6) td a { color: #644AC9; }
	table:not(.archive-table) tbody tr:nth-child(7n+7) td a { color: #A3144D; }
}
body {
	background: var(--pagebg) repeat;
	color: var(--color);
	font: 1.1rem var(--bodyfont);
	letter-spacing: 0.5px;
}
a {
	color: var(--link);
	text-decoration: none;
}
a:hover {
	color: var(--linkhover);
	text-decoration: underline;
}
.skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	padding: 8px 16px;
	background: var(--button);
	color: var(--color);
	z-index: 999;
}
.skip-link:focus {
	top: 0;
}
#container-wrapper {
	width: calc(100% - 24px);
	max-width: 1700px;
	margin: 0 auto;
}
#container {
	padding: 64px;
	box-sizing: border-box;
	text-align: center;
	background: var(--panelbg);
}
body::before,
body::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100px;
	background: url("/assets/borders/Squiggleborder.png") no-repeat center center;
	background-size: auto 100%;
	z-index: 1000;
	pointer-events: none;
}
@media (max-width: 1730px) {
	body::before,
	body::after {
		display: none;
	}
}
body::before { left: 0; }
body::after  { left: auto; right: 0; transform: scaleX(-1); }
#header {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#header img.logo {
	margin: 0 auto 10px;
	display: block;
}
#header nav {
	align-self: center;
	margin-bottom: 10px;
}
#header ul {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}
#header li {
	flex: none;
}
#header li a {
	display: inline-block;
	width: auto;
	padding: 10px 24px;
	background: var(--overlay-strong);
	border: 1px solid var(--overlay-border);
	border-radius: 999px;
	color: var(--color);
	font-family: var(--headerfont);
	font-size: 1.25rem;
	text-align: center;
}
#header li a:hover {
	background: var(--buttonhover);
	color: var(--linkhover);
	text-decoration: none;
}
.back-button {
	display: inline-block;
}
.back-button:hover img {
	opacity: 0.85;
}
.back-button:focus {
	outline: 2px solid var(--linkhover);
	outline-offset: 2px;
}
#content {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
#content > :not(img) {
	flex: 1 1 100%;
	min-width: 0;
}
#content h3,
#content h4 {
	font-family: var(--headerfont);
	font-weight: normal;
	color: var(--headers);
}
#content h3 { font-size: 1.25em; }
#content h4 {
	font-size: 0.9em;
	font-style: italic;
}
#content p {
	margin: 10px 0;
	line-height: 1.5;
	text-align: left;
}
#content dl,
#content ul,
#content ol {
	text-align: left;
}
#content ul,
#content ol {
	margin-left: 20px;
}
#content ul { list-style: inside; }
#content ol { list-style: upper-roman inside; }
#content li {
	margin: 5px 0;
}
#footer {
	font-size: 0.85em;
	margin: 20px 0 0;
	text-align: center;
}
#footer p {
	text-align: center;
}
hr {
	border: 0.5px solid var(--color);
	margin: 10px;
}
img {
	max-width: 100%;
	margin: 5px;
}
.right  { float: right; margin-left: 1em; }
.left   { float: left;  margin-right: 1em; }
.center { display: block; margin: 0 auto; text-align: center; }
.gallery-frame { border-radius: 20px; }
.caption { font-size: 0.85em; font-style: italic; opacity: 0.8; }
.warning {
	border: 2px solid var(--overlay-border);
	background: var(--overlay-strong);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 16px 0;
}
#content h2 {
	padding: 10px 32px;
	font-family: var(--titlefont);
	font-size: clamp(1.1rem, 2vw, 1.8em);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--headers);
	margin: 32px -32px 16px;
}
table:not(.archive-table) {
	font-family: var(--bodyfont);
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	border: none;
}
caption {
	font-family: var(--headerfont);
	font-style: italic;
	margin-bottom: 8px;
}
table:not(.archive-table) thead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
table:not(.archive-table) td,
table:not(.archive-table) th {
	text-align: left;
	padding: 12px 16px;
	border: 3px solid var(--button);
}
table:not(.archive-table) th {
	background: var(--button);
	font-family: var(--titlefont);
	font-size: 1.4em;
	font-weight: normal;
	color: var(--headers);
	text-align: center;
}
table:not(.archive-table) tbody tr td:first-child {
	font-family: var(--headerfont);
	font-size: 1.1em;
}
table:not(.archive-table):not(.screenshots) tbody tr td:first-child::before {
	content: url('/assets/yinyang.gif');
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}
table:not(.archive-table) tbody tr td:last-child {
	font-family: var(--bodyfont);
}
table.screenshots {
	width: 100%;
	table-layout: fixed;
}
table.screenshots th:first-child,
table.screenshots td:first-child {
	width: 40%;
}
table.screenshots th:last-child,
table.screenshots td:last-child {
	width: 60%;
}
table.screenshots td img {
	display: block;
	width: 100%;
	height: auto;
}
table.screenshots td {
	list-style: none;
}
table.screenshots td::before {
	content: none;
}
.button2 {
	display: inline-block;
	flex: 1 1 auto;
	background:
		url('/assets/artwork/peepkitty.png') no-repeat right calc(100% + 50px),
		var(--button);
	border: 7px inset var(--button);
	border-radius: 999px;
	transition: background-position 0.8s ease;
	color: var(--color);
	padding: 0.5rem 1.2rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.button2:hover { color: var(--linkhover); background-position: right bottom; }
.button2:focus { outline: 2px solid var(--linkhover); outline-offset: 2px; }
@media (max-width: 600px) {
	table:not(.archive-table) {
		overflow-x: hidden;
	}
	table:not(.archive-table),
	table:not(.archive-table) thead,
	table:not(.archive-table) tbody,
	table:not(.archive-table) th,
	table:not(.archive-table) td,
	table:not(.archive-table) tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	table:not(.archive-table) thead,
	table:not(.archive-table) thead tr,
	table:not(.archive-table) caption {
		display: none;
	}
	table:not(.archive-table) tr {
		margin-bottom: 12px;
		padding: 0.5rem;
		border: 1px solid var(--button);
		border-radius: 6px;
		background: var(--overlay-soft);
	}
	table:not(.archive-table) td {
		border: none;
		padding: 8px 16px;
	}
	table:not(.archive-table) td img {
		width: 100%;
		height: auto;
		display: block;
	}
	.button2 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media only screen and (max-width: 599px) {
	#container-wrapper {
		width: 100%;
		margin: 0;
	}
	#container {
		padding: 12px;
	}
	#content h2 {
		padding: 10px 12px;
		margin-left: -12px;
		margin-right: -12px;
	}
}
@media only screen and (min-width: 1023px) {
	body { font-size: 1.2rem; }
}
.img-left  { float: left;  padding: 10px; }
.img-right { float: right; padding: 10px; }
.img-wrap { position: relative; display: inline-block; }
.img-wrap img { display: block; }
.gif-frame { width: 300px; border-color: #1f1c4a; border-style: groove; border-radius: 4%; }
.img-wrap:hover img {
	transform: rotate(1deg);
	filter: grayscale(1) sepia(0.6) saturate(3) hue-rotate(70deg) brightness(1);
}
.img-wrap:hover::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 122px; height: 131px;
	background: no-repeat top left / contain;
	pointer-events: none;
	z-index: 2;
	animation: floatFade 2s ease-in-out infinite;
}
.img-wrap:nth-of-type(3n+1):hover::after { background-image: url('/assets/artwork/gnarpgnarp2.png'); }
.img-wrap:nth-of-type(3n+2):hover::after { background-image: url('/assets/artwork/gnarpgnarp3.png'); }
.img-wrap:nth-of-type(3n+0):hover::after { background-image: url('/assets/artwork/gnarpgnarp4.png'); }
@keyframes floatFade {
	0%, 100% { transform: translate(-60px, -100px); }
	50%       { transform: translate(-60px, -110px); }
}
@media (prefers-reduced-motion: reduce) {
	.img-wrap:hover::after { animation: none; }
}
.row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0;
}
.threecolumn {
	flex: 1 1 calc(33.333% - 11px);
	min-width: 200px;
	text-align: left;
}
.threecolumn-scroll {
	max-height: 280px;
	overflow-y: auto;
}
@media (max-width: 800px) {
	.threecolumn {
		flex: 1 1 100%;
	}
}
.twocol {
	flex: 1 1 calc(50% - 12px);
	min-width: 280px;
	text-align: left;
}
@media (max-width: 800px) {
	.twocol { flex: 1 1 100%; }
}
.responsive {
	padding: 0;
	margin: 0 6px;
	float: left;
	width: calc(33.333% - 12px);
	box-sizing: border-box;
}
.responsive:has(> div.gallery:not(.stamp-item)) {
	padding: 0;
}
#content > .responsive {
	flex: 0 0 calc(33.333% - 12px);
}
#content:has(> .responsive) {
	gap: 0;
}
div.gallery { margin: 20px 0; }
div.gallery img {
	width: 100%; height: 300px;
	object-fit: cover; object-position: center;
}
div.desc { padding: 15px; text-align: center; overflow-y: auto; height: 120px; }
.stamp-item { display: flex; flex-direction: column; }
.stamp-item > div:first-child { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 120px; }
div.gallery.stamp-item img { width: auto; height: auto; max-width: 100%; object-fit: contain; clip-path: none; }
.clearfix::after { content: ""; display: table; clear: both; }
@media (max-width: 768px) {
	.responsive { width: 100%; float: none; margin: 6px 0; }
	#content > .responsive { flex: 0 0 100%; }
	div.desc    { max-height: none; overflow-y: visible; }
}
.twocol .responsive {
	width: calc(50% - 12px);
}
@media (max-width: 768px) {
	.twocol .responsive { width: 100%; }
}