:root {
	--black: 0 0 0;
	--white: 1 1 1;

	--dark: 0.06 0.09 0.1;
	--light: 0.81 0.88 0.9;
	--red: 1 0.24 0;
	--orange: 1 0.58 0.15;
	--light-yellow: 1 0.87 0.5;
	--yellow: 1 0.75 0;
	--green: 0 0.75 0.5;
	--blue: 0.4 0.6 1;
	--purple: 0.73 0.4 0.9;
	--pink: 0.9 0.45 0.82;

	--bg: var(--dark);
	--text: var(--light);

	--link: var(--blue);
	--visited: var(--purple);
	--active: var(--red);
	--hover: var(--pink);
	--end-mark: var(--light);

	--serif: -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--sans: "Casserole-Sans", -apple-system, ui-sans-serif, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mono: "Covik", ui-monospace, SFMono-Regular, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--round: ui-rounded, "Arial Rounded MT Bold", sans-serif;
	--blackletter: "Casserole-Blackletter", -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--flare: "Casserole-Flare", -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--classic: "Casserole-Classic", -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--script: "Casserole-Script", -apple-system-ui-serif, ui-serif, "Georgia", serif;
}

@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Medium-Italic.woff") format("woff");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Semibold-Italic.woff") format("woff");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "Covik";
	src: url("/files/fonts/Covik-Sans-Mono-Bold-Italic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Casserole-Blackletter";
	src: url("/files/fonts/Casserole-Blackletter.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Flare";
	src: url("/files/fonts/Casserole-Flare.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Sans";
	src: url("/files/fonts/Casserole-Sans.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Classic";
	src: url("/files/fonts/Casserole-Classic.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Casserole-Script";
	src: url("/files/fonts/Casserole-Script.woff2") format("woff");
	font-weight: 800;
	font-style: normal;
}

html {
	background: color(display-p3 var(--bg) / 1);
	background-size: 96em, auto;
	background-position: center;
	background-repeat: repeat-x;
	font-synthesis: none;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	margin: auto;
	display: flex;
	min-height: 100vh;
	scroll-behavior: smooth;
	scroll-padding-top: 1em;
}

/* html {
	cursor: url('/files/cursor.png') 10 4, auto;
	cursor: -webkit-image-set(
		url('/files/cursor.png') 1x,
		url('/files/cursor@2x.png') 2x,
		url('/files/cursor@3x.png') 3x,
		url('/files/cursor@4x.png') 4x
	) 10 4, auto;
} */

body {
	color: color(display-p3 var(--text) / 1);
	font-family: var(--mono);
	font-size: 1em;
	padding: 1.5em;
	min-width: 0;
	max-width: 32em;
	margin: auto;
}

body.wide {
	max-width: 72em;
}

.breadcrumbs {
	color: color(display-p3 var(--text) / 0.5);
	margin: 0 0 1em 0;
}

.breadcrumbs a, .breadcrumbs a:visited {
	color: color(display-p3 var(--text) / 0.75);
	text-decoration-color: color(display-p3 var(--text) / 0.25);
}

.legal {
	color: color(display-p3 var(--text) / 0.5);
}

.legal a, .legal a:visited {
	color: inherit;
	text-decoration: inherit;
}

p {
	line-height: 1.5em;
	margin: 1em 0;
}

.chat {
	margin: 1.5em 0;
}

.chat img {
	max-width: calc(75% + 1.5em);
	max-height: 20em;
	margin: 0.5em 0;
	border-radius: 1em;
	display: block;
	clear: both;
	box-shadow: none;
}

.chat img.left {
	border-radius: 1em 1em 1em 0.125em;
}

.chat img.right {
	margin-left: auto;
	border-radius: 1em 1em 0.125em 1em;
}

blockquote.left, blockquote.right {
	display: block;
	width: fit-content;
	border-radius: 1em;
	padding: 0.375em 0.75em 0.5em 0.75em;
	margin: 0.5em 0;
	background: color(display-p3 var(--text) / 0.125);
	max-width: 75%;
	border: none;
	color: color(display-p3 var(--text) / 1);;
}

blockquote.right {
	border-radius: 1em;
	margin-left: auto;
	background: color(display-p3 var(--purple) / 0.25);
}

blockquote.left:not(:has(+ blockquote.left)) {
	border-radius: 1em 1em 1em 0.125em;
}
blockquote.right:not(:has(+ blockquote.right)) {
	border-radius: 1em 1em 0.125em 1em;
}

.imessage blockquote.right, blockquote.blue {
	background: color(display-p3 var(--blue) / 0.25);
}
.sms blockquote.right, blockquote.green {
	background: color(display-p3 var(--green) / 0.25);
}
blockquote.purple {
	background: color(display-p3 var(--purple) / 0.25);
}

.chat cite {
	font-weight: 500;
	font-size: 0.875em;
	font-style: italic;
	opacity: 0.5;
	margin: 0 0 -0.25em 0.75em;
	display: none;
}

.chat cite.friend {
	display: block;
}

.chat cite.friend ~ cite.friend {
	display: none;
}

.chat time {
	font-style: italic;
	margin: 1em 0;
	display: block;
	text-align: center;
	font-weight: 500;
	font-size: 0.875em;
	opacity: 0.5;
	line-height: 1.5em;
}

.chat a, .chat a:visited {
	color: color(display-p3 var(--text) / 1);
	text-decoration-color: color(display-p3 var(--text) / 0.375);
}

small {
	font-size: 0.875em;
	opacity: 0.875;
	line-height: 1.5em;
}

.quiet {
	opacity: 0.75;
}

em.slanty {
	color: color(display-p3 var(--pink) / 1);
	font-style: normal;
	display: inline-block;
	margin: 0 0 0 .125em;
	transform: rotate(15deg);
}

.truncate {
	display: none !important;
}

.metadata {
	margin-left: 0.3em;
	display: inline-block;
}

.meta {
	font-size: 0.875em;
	padding: 0 0.375em 0.0625em 0.375em;
	overflow: visible;
	border-radius: 0.25em;
	font-weight: 600;
	white-space: nowrap;
}

.filetype {
	color: color(display-p3 var(--purple) / 1);
	background: color(display-p3 var(--purple) /0.125);
	border: 1.5px solid color(display-p3 var(--purple) /0.375);
	text-shadow: 0 0 0.5em color(display-p3 var(--purple) /0.25);
	font-feature-settings: "ss01";
}

.zip {
	color: color(display-p3 var(--orange) / 1);
	background: color(display-p3 var(--orange) / 0.125);
	border: 1.5px solid color(display-p3 var(--orange) / 0.375);
	text-shadow: 0 0 0.5em color(display-p3 var(--orange) / 0.25);
	font-feature-settings: "ss01";
}

.date {
	background: color(display-p3 var(--green) / 0.25);
	color: color(display-p3 var(--text) / 1);
	border-radius: 0.25em;
	font-feature-settings: "ss01";
	text-transform: uppercase;
	padding: 0 0.375em 0.0625em 0.375em;
	margin-right: 0.25em;
}

.tag {
	background: color(display-p3 var(--blue) / 0.375);
	color: color(display-p3 var(--text) / 1);
	border-radius: 2em;
	text-transform: uppercase;
	padding: 0 0.5em 0.0625em 0.5em;
	margin-right: 0.25em;
}

.filesize {
	background: color(display-p3 var(--text) / 0);
	color: color(display-p3 var(--text) / 1);
	border: 1.5px dotted color(display-p3 var(--text) / 0.5);
	padding: 0 0.5em 0.0625em 0.5em;
	border-radius: 2em;
}

.resolution {
	background: color(display-p3 var(--black) / 0.5);
	color: color(display-p3 var(--yellow) / 1);
	border: 1.5px ridge color(display-p3 var(--yellow) / 1);
	text-shadow: 0 0 0.5em color(display-p3 var(--yellow) /0.5);
}

.edit {
	opacity: 0.5;
	font-style: italic;
}

.edit::before {
	content: "Edited ";
}

.edit::after {
	content: ":";
}

strong {
	font-weight: 700;
}

img, video {
	box-shadow: 0 0.5em 0.75em color(display-p3 var(--black) / 0.25);
	width: 640px;
	margin: 0.5em 0 0.5em -64px;
	height: auto;
	position: relative;
	border-radius: 0.125em;
}

img + p {
	margin: 0.625em 0 1em 0;
}

audio {
	width: 100%;
	position: relative;
}

div.youtube {
	width: 100%;
	height: 0;
	padding-bottom: 60%;
	position: relative;
}

div.youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 0.125em;
	box-shadow: 0 0.5em 0.75em color(display-p3 var(--black) / 0.25);
}

.highlight {
	background: color(display-p3 var(--yellow) / 1);
	color: color(display-p3 var(--bg) / 1);
}

::selection {
	background: color(display-p3 var(--yellow) / 1);
	color: color(display-p3 var(--bg) / 1);
}

::target-text {
	background: color(display-p3 var(--yellow) / 1);
	color: color(display-p3 var(--bg) / 1);
}

hr {
	border: none;
	border-bottom: 1.5px solid color(display-p3 var(--text) / 0.125);
	margin: 1.5em 0;
}

.logo {
	width: 5.33em !important;
	height: 2em;
	margin: -0.25em 0.375em 0 0;
	display: inline-block;
	vertical-align: middle;
	left: revert;
	border-radius: 0;
	box-shadow: none;
}

.avatar {
	width: 1.25em;
	height: 1.25em;
	margin: -0.125em 0.25em 0 0;
	display: inline-block;
	vertical-align: middle;
	left: revert;
	border-radius: 0;
	-webkit-mask-image: url('/files/svg/app-icon.svg');
	mask-image: url('/files/svg/app-icon.svg');
}

li .avatar {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

a:has(.logo):hover .logo {
	opacity: 0.75;
}

a .avatar:active, a .avatar:active:hover,
a .logo:active, a .logo:active:hover {
	opacity: 0.75;
	scale: 100%;
}

h1, h2, h3 {
	line-height: 1em;
	margin: 0.5em 0;
}

h1 {
	color: color(display-p3 var(--text) / 1);
	font-family: var(--flare);
	font-size: 2em;
}

h2 {
	color: color(display-p3 var(--text) / 0.75);
	font-family: var(--sans);
	font-size: 1.5em;
}

h2 strong {
	color: color(display-p3 var(--text) / 1);
	font-weight: inherit;
}

h3 {
	color: color(display-p3 var(--text) / 0.5);
	font-family: var(--sans);
	font-size: 1.25em;
}

ul, ol {
	line-height: 1.5em;
	padding-left: 1.5em;
	margin: 1em 0;
}

ul ul, ol ol {
	padding-left: 1.4375em;
	/* padding-left: 1.1875em; */
	margin: 0;
}

ul {
	list-style-type: squares;
}

ul ul {
	list-style-type: tofu;
}

ol {
	list-style-type: decimal;
}

ol ol {
	list-style-type: lower-alpha;
}

h1 + ul.links, h1 + ul.downloads {
	margin-top: 0.25em;
}

ul li:not(ul.grid li), ol {
	/* text-indent: -0.25em; */
}

ul.none {
	list-style-type: none;
	/* padding-left: 0.25em; */
	padding: 0;
}

h2 + dl, dl + dl {
	padding-top: 0;
}

.colophon h2 {
	text-align: center;
}

dl {
	width: fit-content;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 1em 0;
	margin: auto;
}

dt, dd {
	padding: 0.25em 0;
	margin: 0;
}

dt {
	padding-right: 1em;
	text-align: right;
	font-weight: 600;
	color: color(display-p3 var(--text) / 0.5);
	border-right: 1.5px solid color(display-p3 var(--text) / 0.125);
}

dd {
	padding-left: 1em;
}

.button {
	line-height: 1.375em;
	font-size: 1em;
	color: color(display-p3 var(--link) / 1);
	border: 1.5px solid color(display-p3 var(--link) / 0.25);
	background: color(display-p3 var(--link) / 0.125);
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0;
	border-radius: 0.25em;
	text-decoration: none;
	font-weight: 600;
}

.button .icon {
	color: color(display-p3 var(--text) / 1);
}

.button:visited {
	color: color(display-p3 var(--visited) / 1);
	border: 1.5px solid color(display-p3 var(--visited) /0.25);
	background: color(display-p3 var(--visited) /0.125);
}

.button.donate {
	color: color(display-p3 var(--green) / 1);
	border: 1.5px solid color(display-p3 var(--green) /0.25);
	background: color(display-p3 var(--green) /0.125);
}

.button:hover {
	color: color(display-p3 var(--hover) / 1);
	border: 1.5px solid color(display-p3 var(--hover) /0.75);
	background: color(display-p3 var(--hover) /0.25);
}

.button:active, .button:active:hover {
	color: color(display-p3 var(--active) / 1);
	border: 1.5px solid color(display-p3 var(--active) / 0.75);
	background: color(display-p3 var(--active) / 0.25);
}

.button .quiet {
	font-weight: 400;
}

.buttons {
	display: inline-block;
}

li::marker {
	color: color(display-p3 var(--green) / 1);
}

header ul.links li:nth-child(4n+1)::marker {
	color: color(display-p3 var(--yellow) / 1);
}

header ul.links li:nth-child(4n+2)::marker {
	color: color(display-p3 var(--green) / 1);
}

header ul.links li:nth-child(4n+3)::marker {
	color: color(display-p3 var(--purple) / 1);
}

header ul.links li:nth-child(4n)::marker {
	color: color(display-p3 var(--red) / 1);
}

ul.links ul li::marker {
	color: color(display-p3 var(--pink) / 1);
}

ul.downloads li::marker {
	color: color(display-p3 var(--blue) / 1);
}

ul.links .break:after {
	content: "";
	display: block;
	height: 0.75em;
}

.home {
	min-width: fit-content;
	display: flex;
	gap: 2em;
}

.home ul {
	width: calc(50% - 1em);
}

@counter-style squares {
	system: cyclic;
	symbols: "⬛";
	suffix: " ";
}

@counter-style tofu {
	system: cyclic;
	symbols: "⬜";
	suffix: " ";
}

.links, ul.links ul { list-style-type: arrows; }
@counter-style arrows {
	system: cyclic;
	symbols: "→";
	suffix: " ";
}
.leftarrows { list-style-type: leftarrows; }
@counter-style leftarrows {
	system: cyclic;
	symbols: "←";
	suffix: " ";
}

.manicules { list-style-type: manicules }
@counter-style manicules {
	system: cyclic;
	symbols: "☞";
	suffix: " ";
}

.hand { list-style-type: hand }
@counter-style hand {
	system: cyclic;
	symbols: "✋";
	suffix: " ";
}

.craft { 	list-style-type: craft }
@counter-style craft {
	system: cyclic;
	symbols: "✍";
	suffix: " ";
}

.shopping-bag { list-style-type: shopping-bag }
@counter-style shopping-bag {
	system: cyclic;
	symbols: "👜";
	suffix: " ";
}

.social { list-style-type: social }
@counter-style social {
	system: cyclic;
	symbols: "💬";
	suffix: " ";
}

.pen { list-style-type: pen }
@counter-style pen {
	system: cyclic;
	symbols: "✑";
	suffix: " ";
}

.hourglass { list-style-type: hourglass }
@counter-style hourglass {
	system: cyclic;
	symbols: "⌛";
	suffix: " ";
}

.heart { list-style-type: heart }
@counter-style heart {
	system: cyclic;
	symbols: "♡";
	suffix: " ";
}

.sunglasses { list-style-type: sunglasses }
@counter-style sunglasses {
	system: cyclic;
	symbols: "🕶";
	suffix: " ";
}

.notepad { list-style-type: notepad }
@counter-style notepad {
	system: cyclic;
	symbols: "🗊";
	suffix: " ";
}

.hammer { list-style-type: hammer }
@counter-style hammer {
	system: cyclic;
	symbols: "🔨";
	suffix: " ";
}

.alert { list-style-type: alert }
@counter-style alert {
	system: cyclic;
	symbols: "⚠";
	suffix: " ";
}

.flying-cash { list-style-type: flying-cash }
@counter-style flying-cash {
	system: cyclic;
	symbols: "💸";
	suffix: " ";
}

.poop { list-style-type: poop }
@counter-style poop {
	system: cyclic;
	symbols: "💩";
	suffix: " ";
}

.eyeball { list-style-type: eyeball }
@counter-style eyeball {
 system: cyclic;
 symbols: "👁";
 suffix: " ";
}

.downloads { list-style-type: downloads }
@counter-style downloads {
 system: cyclic;
 symbols: "☁";
 suffix: " ";
}

ul.grid {
	max-width: 72em;
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(calc((100% - 2em) / 3), 1fr));
	align-items: end;
}

footer h2, footer h3 {
	margin: 0.5em 0;
}

h2 + ul.grid, h3 + ul.grid {
	margin-top: 0.5em;
}

ul + h2, ul + h3 {
	margin-top: 1em;
}

ul.grid.dense {
	grid-template-columns: repeat(auto-fill, minmax(calc((100% - 4em) / 5), 1fr));
}

.square img, .dvd img.square { aspect-ratio: 1/1; }
.poster img { aspect-ratio: 4/6; }
.iconpreview img { aspect-ratio: 640/488; }
.wallpaperpreview img { aspect-ratio: 64/40; }
.sketchbook img, .portfolio img { aspect-ratio: 64/48; }
.portraitbox img { aspect-ratio: 42/60; }
.landscapebox img { aspect-ratio: 60/42; }
.softwarebox img { aspect-ratio: 5/6; }
.narrowbox img { aspect-ratio: 37/60; }
.nds img { aspect-ratio: 50/45; }
.dvd img { aspect-ratio: 43/60; }
.bluray img { aspect-ratio: 48/60; }

ul.grid li {
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
}

ul.grid img {
	background: color(display-p3 var(--black) / 1);
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	transition: 250ms;
	z-index: 0;
	box-shadow: 0 0.5em 0.75em color(display-p3 var(--black) / 0.25);
}

img.badge {
	image-rendering: pixelated;
	width: 88px !important;
	height: 31px !important;
	margin: 0;
	border-radius: 0;
}
img.badge:hover {
	opacity: 0.75;
}

div.buttonbox {
	background: none;
	width: auto;
	margin: 1.5em auto;
	padding: 0.75em;
	border-radius: 0.5em;
	text-align: center;
	border: 1.5px solid color(display-p3 var(--text) / 0.125);
}

div.buttonbox p {
	margin: 0.125em;
	display: inline-block;
	color: color(display-p3 var(--text) / 1);
}

div.buttonbox p strong {
	color: color(display-p3 var(--pink) / 1);
}

div.buttonbox .button {
	margin: 0.5em 0;
}

img {
	border-radius: 0.125em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.audio {
	transition: opacity 500ms;
	cursor: pointer;
}

body.media:has(.nowplaying) .audio:not(.nowplaying) {
	opacity: 0.5;
	: opacity 500ms;
}

ul.grid a:hover img, ul.grid .audio:hover img, .nav-container a:hover {
	scale: 103.125%;
	transition: 125ms;
	z-index: 100;
	box-shadow: 0 2em 3em color(display-p3 var(--black) / 0.25);
}

ul.grid a:active img, ul.grid .audio:active img {
	opacity: 0.75;
	scale: 100%;
}

ul.grid.shop img {
	background: color(display-p3 var(--text) / 0.125);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	box-shadow:
		0 0.5em 0.75em color(display-p3 var(--black) / 0.25),
		inset 0 1px 1px 0 color(display-p3 var(--white) / 0),
		inset 0 0 2px 0 color(display-p3 var(--link) / 0);
}

ul.grid.shop li:hover img {
	background: color(display-p3 var(--link) / 0.25);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow:
		0 2em 3em color(display-p3 var(--black) / 0.25),
		inset 0 0.5px 1px 0.5px color(display-p3 var(--white) / 0.75),
		inset 0 0 24px 0 color(display-p3 var(--link) / 1);
}

ul.grid.detail li span {
	font-size: 0.875em;
	display: block;
	line-height: 1.25em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

ul.grid.detail li .title {
	margin-top: 0.5em;
	color: color(display-p3 var(--text) / 1);
	font-weight: 700;
}

ul.grid.detail li .type {
	color: color(display-p3 var(--text) / 0.875);
}

ul.grid.detail li .description {
	color: color(display-p3 var(--text) / 0.625);
}

ul.grid.detail li .price {
	color: color(display-p3 var(--green) /0.75);
}

ul.grid a, ul.grid a:hover, ul.grid a:visited, ul.grid a:active {
	color: color(display-p3 var(--text) / 1);
	text-decoration: none;
}

a, .a, ul.rich a {
	font-weight: 500;
	color: color(display-p3 var(--link) / 1);
	text-decoration-color: color(display-p3 var(--link) / 0.375);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

a:visited, .visited, ul.rich a:visited {
	color: color(display-p3 var(--visited) / 1);
	text-decoration-color: color(display-p3 var(--visited) /0.375);
}

a:active, .active {
	color: color(display-p3 var(--active) / 1);
	text-decoration-color: color(display-p3 var(--active) / 0.375);
}

dl a, dl a:visited,
ul a, ul a:visited,
h1 a, h1 a:visited,
h2 a, h2 a:visited,
h3 a, h3 a:visited {
	color: color(display-p3 var(--text) / 1);
	text-decoration-color: color(display-p3 var(--text) / 0.375);
}

h2 a, h2 a:visited {
	color: color(display-p3 var(--text) / 0.75);
}

h3 a, h3 a:visited {
	color: color(display-p3 var(--text) / 0.625);
}

a:active:hover {
	color: color(display-p3 var(--active) / 1);
	text-decoration-color: color(display-p3 var(--active) / 0.5);
}

a:hover, a.hover, h1 a:hover, h2 a:hover, h3 a:hover, .breadcrumbs a:hover, ul a:hover, ul.rich a:hover, .chat a:hover, dl a:hover {
	color: color(display-p3 var(--hover) / 1);
	text-decoration-color: color(display-p3 var(--hover) /0.5);
}

h2 a.anchor, h2 a.anchor:active, h2 a.anchor:visited {
	font-family: var(--blackletter);
	color: color(display-p3 var(--text) / 1);
	background: color(display-p3 var(--text) / 0.25);
	padding: 0.0625em 0.25em;
	margin-right: 0.25em;
	border-radius: 0.125em;
	text-decoration: none;
}

h2 a.anchor:hover {
	color: color(display-p3 var(--bg) / 1);
	background: color(display-p3 var(--text) / 1);
}

blockquote {
	border-radius: 1em;
	background: color(display-p3 var(--yellow) / 0.25);
	color: color(display-p3 var(--light-yellow) / 1);
	padding: 1em 1.5em;
	margin: 2em 0;
}

code {
	color: color(display-p3 var(--green) / 1);
	font-family: var(--mono);
	font-size: inherit;
	tab-size: 2;
	font-feature-settings: "ss01";
	font-weight: 700;
}

pre {
	background: color(display-p3 var(--black) / 1);
	border-left: color(display-p3 var(--green) / 1) 2px solid;
	text-shadow: 0 0 0.5em color(display-p3 var(--green) /0.5);
	margin: 2em 0;
	padding: 1em 0 1em 1.5em;
	white-space: pre;
	overflow-x: scroll;
}

pre code {
	font-weight: normal;
}

.spoiler {
	background: color(display-p3 var(--text) / 1);
}

.spoiler:hover {
	background: color(display-p3 var(--text) / 0.25);
}

blockquote .spoiler {
	background: color(display-p3 var(--yellow) / 1);
}

blockquote .spoiler:hover {
	background: color(display-p3 var(--yellow) /0.25);
}

p.available::before {
	color: color(display-p3 var(--green) / 1);
	content: "●";
	margin-right: 0.5em;
}

p:last-of-type::after {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: color(display-p3 var(--end-mark) / 0.5);
	-webkit-mask: url("/files/end-mark.svg") no-repeat center;
	mask: url("/files/end-mark.svg") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	margin-left: 0.25em;
	content: "";
}


header {
	border-bottom: 1.5px solid color(display-p3 var(--text) / 0.125);
	margin: 0 0 1.5em 0;
	padding: 0 0 0.5em 0;
}

footer {
	clear: both;
	color: color(display-p3 var(--text) / 1);
	border-top: 1.5px solid color(display-p3 var(--text) / 0.125);
	margin: 1.5em 0 0 0;
	padding: 0.5em 0 0 0;
}

footer h3 {
	font-size: 1em;
}

footer p {
	font-size: 0.875em;
}

footer .button {
	margin-top: 0.5em;
	color: color(display-p3 var(--text) / 0.825);
	border: 1.5px solid color(display-p3 var(--text) / 0.25);
	background: color(display-p3 var(--text) / 0.0625);
}

footer .button .icon {
	color: color(display-p3 var(--text) / 1);
}

header + img, header + video {
	margin-top: 0;
}

header p:last-of-type::after,
footer p:last-of-type::after,
p.available:last-of-type::after,
div.buttonbox p:last-of-type::after,
blockquote p:last-of-type::after {
	content: none;
}

@media (max-width: 720px) {
	img, video {
		width: 100%;
		margin: 0.5em 0;
	}
	ul.grid {
		grid-gap: 0.75em;
	}

	ul.grid.dense {
		grid-template-columns: repeat(auto-fill, minmax(calc((100% - 3em) / 4), 1fr));
	}
}

@media (max-width: 512px) {
	ul.grid {
		grid-gap: 0.5em;
	}

	ul.grid.dense {
		grid-template-columns: repeat(auto-fill, minmax(calc((100% - 2em) / 3), 1fr));
	}
}

@media (max-width: 360px) {
	.home {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 60%;
		margin: auto;
	}

	.home ul {
		width: 100%;
	}

	ul.grid.dense {
		grid-template-columns: repeat(auto-fill, minmax(calc((100% - 1em) / 2), 1fr));
	}
}

@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 0) and (hover: none) and (pointer: coarse) {
	.button {
		padding: 0.125em 0.5em 0.25em 0.5em;
	}
}