:root {
	--bg: 35, 35, 140;
	--darkerink: 153, 187, 255;
	--ink: 178, 204, 255;
	--brightink: 204, 221, 255;
	--shade: 58, 58, 166;
	--link: 89, 172, 255;
	--visited: 198, 140, 255;
	--active: 255, 76, 106;
	--hover: 92, 195, 229;
	--code: 69, 229, 109;
	--codebg: 0, 5, 13;
	--highlight: 255, 195, 76;

	--p3bg: 0.14 0.14 0.55;
	--p3darkerink: 0.6 0.73 1;
	--p3ink: 0.7 0.8 1;
	--p3brightink: 0.8 0.87 1;
	--p3shade: 0.23 0.23 0.65;
	--p3link: 0.35 0.68 1;
	--p3visited: 0.78 0.55 1;
	--p3active: 1 0.3 0.42;
	--p3hover: 0.36 0.77 0.9;
	--p3code: 0.27 0.9 0.43;
	--p3codebg: 0 0.02 0.05;
	--p3highlight: 1 0.77 0.3;

	--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:
		linear-gradient(180deg, rgba(var(--shade), 1), rgba(var(--bg), 1) 96em),
		rgba(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;
}

/* 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: rgba(var(--ink), 1);
	text-shadow: 0 0.125em 0.125em rgba(var(--codebg), 0.125);
	font-family: var(--mono);
	font-size: 1.25em;
	padding: 1.5em;
	min-width: 0;
	max-width: 32em;
	margin: auto;
}

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

.breadcrumbs {
	color: rgba(var(--darkerink), 0.5);
	font-size: 0.875em;
	margin: 0 0 0.5em 0;
}

.breadcrumbs a, .breadcrumbs a:visited {
	color: rgba(var(--darkerink), 0.75);
	text-decoration-color: rgba(var(--ink), 0.25);
}

.legal {
	color: rgba(var(--darkerink), 0.5);
}

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

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

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

.quiet {
	opacity: 0.625;
}

em.slanty {
	font-style: normal;
	display: inline-block;
	margin: 0 0 0 .125em;
	transform: rotate(15deg);
}

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

.meta {
	font-size: 0.75em;
	padding: 0 0.375em 0.0625em 0.375em;
	text-shadow: none;
	overflow: visible;
	border-radius: 0.25em;
	font-weight: 600;
}

.filetype {
	color: rgba(var(--code), 1);
	background: rgba(var(--code), 0.125);
	border: 2px solid rgba(var(--code), 0.375);
	text-shadow: 0 0 0.5em rgba(var(--code), 0.25);
	font-feature-settings: "ss01";
}

.zip {
	color: rgba(var(--ink), 1);
	background: rgba(var(--darkerink), 0.125);
	border: 2px solid rgba(var(--darkerink), 0.375);
	text-shadow: 0 0 0.5em rgba(var(--darkerink), 0.25);
	font-feature-settings: "ss01";
}

.filesize {
	background: rgba(var(--darkerink), 0);
	color: rgba(var(--ink), 1);
	border: 2px dotted rgba(var(--darkerink), 0.5);
	padding: 0 0.5em 0.0625em 0.5em;
	border-radius: 2em;
}

.resolution {
	background: rgba(var(--codebg), 0.5);
	color: rgba(var(--highlight), 1);
	border: 2px ridge rgba(var(--highlight), 1);
	text-shadow: 0 0 0.5em rgba(var(--highlight), 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 rgba(var(--codebg), 0.125);
	width: 106.25%;
	height: auto;
	left: -3.125%;
	position: relative;
	border-radius: 0.75em;
	margin: 0.5em 0;
	transition: 0.5s;
}

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

audio {
	width: 106.25%;
	left: -3.125%;
	position: relative;
}

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

div.youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 0.75em;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
}

::selection, .highlight {
	background: rgba(var(--highlight), 1);
	color: rgba(var(--bg), 1);
}

hr {
	border: 1px solid rgba(var(--darkerink), 0.125);
	margin: 1.5em 0;
}

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

h2 .avatar {
	width: 40px;
	height: 40px;
}

h3 .avatar {
	width: 28px;
	height: 28px;
}

li .avatar {
	width: 18px;
	height: 18px;
	margin-right: 7px;
}

a:has(.avatar):hover .avatar,
a:has(.avatar):hover .avatar {
	scale: 106.25%;
	transition: 0.125s;
	z-index: 100;
}

a .avatar:active {
	opacity: 75%;
	scale: 100%;
}

h1:has(.avatar), h2:has(.avatar) {
	margin: 0.5em 0;
}

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

h1 {
	color: rgba(var(--ink), 1);
	font-family: var(--flare);
	font-size: 2em;
}

h2 {
	color: rgba(var(--darkerink), 0.75);
	font-family: var(--sans);
	font-size: 1.5em;
}

h2 strong {
	color: rgba(var(--darkerink), 1);
	font-weight: inherit;
}

h3 {
	color: rgba(var(--darkerink), 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;
}

.button {
	line-height: 1.375em;
	font-size: 1em;
	text-shadow: none;
	color: rgba(var(--link), 1);
	border: 2px solid rgba(var(--link), 0.5);
	background: rgba(var(--link), 0.125);
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0.125em 0;
	border-radius: 0.375em;
	text-decoration: none;
	transition: 0.1875s;
	font-weight: 600;
}

.button .icon {
	color: rgba(var(--brightink), 1);
}

.button:visited {
	color: rgba(var(--visited), 1);
	border: 2px solid rgba(var(--visited), 0.5);
	background: rgba(var(--visited), 0.125);
}

.button.donate {
	color: rgba(var(--code), 1);
	border: 2px solid rgba(var(--code), 0.5);
	background: rgba(var(--code), 0.125);
}

.button:hover {
	color: rgba(var(--hover), 1);
	border: 2px solid rgba(var(--hover), 0.75);
	background: rgba(var(--hover), 0.25);
	scale: 103.125%;
}

.button:active, .button:active:hover {
	color: rgba(var(--active), 1);
	border: 2px solid rgba(var(--active), 0.75);
	background: rgba(var(--active), 0.25);
	scale: 100%;
}

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

.buttons {
	display: inline-block;
}

li::marker {
	color: rgba(var(--darkerink), 1);
}

ul.links ul li::marker {
	color: rgba(var(--darkerink), 0.375);
}

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

@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: " ";
}

.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: 48em;
	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));
	transition: 0.25s;
	align-items: end;
}

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

h2 + p.legal, h3 + p.legal {
	margin-top: 0.5em;
}

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: rgba(var(--shade), 1);
	border-radius: 0.75em;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	transition: border-radius 0.5s;
	transition: 0.25s;
	z-index: 0;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
}

div.buttonbox {
	background: rgba(var(--bg), 0.75);
	width: auto;
	margin: 1em auto;
	padding: 0.75em;
	border-radius: 0.75em;
	text-align: center;
	border: 2px solid rgba(var(--shade), 1);
}

div.buttonbox p {
	margin: 0.125em;
	display: inline-block;
	color: rgba(var(--darkerink), 1);
}

div.buttonbox p strong {
	color: rgba(var(--ink), 1);
}

body.media 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 0.5s;
	cursor: pointer;
}

body.media:has(.nowplaying) .audio:not(.nowplaying) {
	opacity: 0.5;
	transition: opacity 0.5s;
}

ul.grid a:hover img, ul.grid .audio:hover img, .nav-container a:hover {
	scale: 103.125%;
	transition: 0.125s;
	z-index: 100;
	box-shadow: 0 2em 3em rgba(var(--codebg), 0.25);
}

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

ul.grid.shop img {
	background: rgba(var(--ink), 0.125);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	box-shadow:
		0 0.5em 0.75em rgba(var(--codebg), 0.125),
		inset 0 1px 1px 0 rgba(255, 255, 255, 0),
		inset 0 0 2px 0 rgba(var(--link), 0);
}

ul.grid.shop li:hover img {
	background: rgba(var(--link), 0.25);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow:
		0 2em 3em rgba(var(--codebg), 0.25),
		inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.75),
		inset 0 0 24px 0 rgba(var(--link), 1);
}

ul.grid.detail li span {
	font-size: 0.6875em;
	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: rgba(var(--brightink), 1);
	font-weight: 700;
}

ul.grid.detail li .type {
	color: rgba(var(--darkerink), 0.875);
}

ul.grid.detail li .description {
	color: rgba(var(--darkerink), 0.625);
}

ul.grid.detail li .price {
	color: rgba(var(--code), 0.75);
}

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

a, .a {
	font-weight: 500;
	color: rgba(var(--link), 1);
	text-decoration-color: rgba(var(--link), 0.25);
	text-underline-offset: 0.125em;
	text-decoration-thickness: 2px;
	transition: color 0.1875s, text-decoration-color 0.1875s;
}

a:visited, .visited {
	color: rgba(var(--visited), 1);
	text-decoration-color: rgba(var(--visited), 0.25);
}

a:active, .active {
	color: rgba(var(--active), 1);
	text-decoration-color: rgba(var(--active), 0.25);
	transition: color 0.0625s, text-decoration-color 0.0625s;
}

h1 a, h1 a:visited {
	color: rgba(var(--brightink), 1);
	text-decoration-color: rgba(var(--brightink), 0.25);
	text-underline-offset: 0.0703125em;
}

h2 a, h2 a:visited {
	color: rgba(var(--ink), 0.75);
	text-decoration-color: rgba(var(--ink), 0.25);
	text-underline-offset: 0.0703125em;
}

h3 a, h3 a:visited {
	color: rgba(var(--ink), 0.625);
	text-decoration-color: rgba(var(--ink), 0.25);
	text-underline-offset: 0.0703125em;
}

a:active:hover {
	color: rgba(var(--active), 1);
	text-decoration-color: rgba(var(--active), 0.5);
}

a:hover, a.hover, h1 a:hover, h2 a:hover, h3 a:hover, .breadcrumbs a:hover {
	color: rgba(var(--hover), 1);
	text-decoration-color: rgba(var(--hover), 0.75);
}

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

h2 a.anchor:hover {
	color: rgba(var(--bg), 1);
	background: rgba(var(--ink), 1);
	text-shadow: none;
}

blockquote {
	background: rgba(var(--codebg), 0.375);
	color: rgba(var(--highlight), 1);
	border-left: rgba(var(--highlight), 1) 2px solid;
	padding: 1em 1.5em;
	margin: 2em 0;
}

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

pre {
	background: rgba(var(--codebg), 1);
	border-left: rgba(var(--code), 1) 2px solid;
	text-shadow: 0 0 0.5em rgba(var(--code), 0.5);
	margin: 2em 0;
	padding: 1em 0 1em 1.5em;
	white-space: pre;
	overflow-x: scroll;
}

pre code {
	font-weight: normal;
}

.spoiler {
	background: rgba(var(--ink), 1);
	text-shadow: none;
}

.spoiler:hover {
	background: rgba(var(--ink), 0.25);
}

blockquote .spoiler {
	background: rgba(var(--highlight), 1);
	text-shadow: none;
}

blockquote .spoiler:hover {
	background: rgba(var(--highlight), 0.25);
}

p.available::before {
	color: rgba(var(--code), 1);
	content: "●";
	margin-right: 0.5em;
}

p:last-of-type::after {
	color: rgba(var(--active), 1);
	content: "⬛";
	margin-left: 0.25em;
}

header {
	border-bottom: 2px solid rgba(var(--ink), 0.125);
	margin: 0 0 1.5em 0;
	padding: 0 0 0.5em 0;
}

footer {
	clear: both;
	color: rgba(var(--ink), 1);
	border-top: 2px solid rgba(var(--ink), 0.125);
	margin: 1.5em 0 0 0;
	padding: 0.5em 0 0 0;
	/* opacity: 0.75; */
}

footer p {
	font-size: 0.625em;
}

footer .button {
	font-size: 0.8125em;
	color: rgba(var(--darkerink), 0.825);
	border: 2px solid rgba(var(--darkerink), 0.25);
	background: rgba(var(--darkerink), 0.0625);
}

footer .button .icon {
	color: rgba(var(--ink), 1);
}

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

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;
}

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

ul.grid.nav li.double {
	grid-column: span 2;
}

ul.grid.nav li {
	display: inline-block;
}

ul.grid.nav li a {
	font-weight: 700;
	align-content: center;
	text-align: center;
	display: block;
	line-height: 0;
	width: auto;
	height: 2em;
	background: rgba(var(--shade), 1);
	border-radius: 0.125em;
	margin: 0;
	padding: 1em;
	transition: 0.25s;
	z-index: 0;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
	text-shadow:
		0 0 0.125em rgba(var(--bg), 1),
		0 0.125em 0.25em rgba(var(--bg), 1);
}

ul.grid.nav li a:hover {
	color: rgba(var(--brightink), 1);
	scale: 103.125%;
	transition: 0.125s;
	z-index: 100;
	box-shadow: 0 2em 3em rgba(var(--codebg), 0.25);
}

ul.grid.nav li a.nav-intro {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/photos/thumbs/american-waterfront-selfie.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-portfolio {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/parakeetappicons.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-icons {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/icons/thumbs/ive-drives-vol-3.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-wallpapers {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/wallpapers/thumbs/overlook-hotel.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-photos {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/photos/thumbs/osaka-castle.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-sketchbook {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/sketchbook/thumbs/mighty-ducks.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-junior {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/kiribakosequel.webp");
		background-size: cover;
		background-position: center;
}

ul.grid.nav li a.nav-crown {
	background:
		linear-gradient(180deg, color(display-p3 var(--p3shade) / 0.5), color(display-p3 var(--p3shade) / 0.75) 4em),
		url("/files/images/isomorphic.webp");
		background-size: cover;
		background-position: center;
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	html {
		background:
			linear-gradient(180deg, color(display-p3 var(--p3shade) / 1), color(display-p3 var(--p3bg) / 1) 96em),
			color(display-p3 var(--p3bg) / 1);
		background-size: 96em, auto;
		background-position: center;
		background-repeat: repeat-x;
	}
	body {
		color: color(display-p3 var(--p3ink) / 1);
		text-shadow: 0 0.125em 0.125em color(display-p3 var(--p3codebg) / 0.125);
	}

	.breadcrumbs {
		color: color(display-p3 var(--p3darkerink) / 0.5);
	}

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

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

	.filetype {
		color: color(display-p3 var(--p3code) / 1);
		background: color(display-p3 var(--p3code) / 0.125);
		border: 2px solid color(display-p3 var(--p3code) / 0.375);
		text-shadow: 0 0 0.5em color(display-p3 var(--p3code) / 0.25);
	}

	.zip {
		color: color(display-p3 var(--p3ink) / 1);
		background: color(display-p3 var(--p3darkerink) / 0.125);
		border: 2px solid color(display-p3 var(--p3darkerink) / 0.375);
		text-shadow: 0 0 0.5em color(display-p3 var(--p3darkerink) / 0.25);
	}

	.filesize {
		background: color(display-p3 var(--p3darkerink) / 0);
		color: color(display-p3 var(--p3ink) / 1);
		border: 0.125em dotted color(display-p3 var(--p3darkerink) / 0.5);
	}

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

	img, video {
		box-shadow: 0 0.5em 0.75em color(display-p3 var(--p3codebg) / 0.125);
	}

	::selection, .highlight {
		background: color(display-p3 var(--p3highlight) / 1);
		color: color(display-p3 var(--p3bg) / 1);
	}

	hr {
		border: 1px solid color(display-p3 var(--p3darkerink) / 0.125);
	}

	h1 {
		color: color(display-p3 var(--p3ink) / 1);
	}

	h2 {
		color: color(display-p3 var(--p3darkerink) / 0.75);
	}

	h2 strong {
		color: color(display-p3 var(--p3darkerink) / 1);
	}

	h3 {
		color: color(display-p3 var(--p3darkerink) / 0.5);
	}

	.button {
		color: color(display-p3 var(--p3link) / 1);
		border: 2px solid color(display-p3 var(--p3link) / 0.5);
		background: color(display-p3 var(--p3link) / 0.125);
	}

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

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

	.button.donate {
		color: color(display-p3 var(--p3code) / 1);
		border: 2px solid color(display-p3 var(--p3code) / 0.5);
		background: color(display-p3 var(--p3code) / 0.125);
	}

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

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

	footer .button {
		color: color(display-p3 var(--p3darkerink) / 0.825);
		border: 2px solid color(display-p3 var(--p3darkerink) / 0.25);
		background: color(display-p3 var(--p3darkerink) / 0.0625);
	}

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

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

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

	ul.grid img {
		background: color(display-p3 var(--p3shade) / 1);
		box-shadow: 0 0.5em 0.75em color(display-p3 var(--p3codebg) / 0.125);
	}

	div.buttonbox {
		background: color(display-p3 var(--p3bg) / 0.75);
		border: 2px solid color(display-p3 var(--p3shade) / 1);
	}

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

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

	ul.grid a:hover img {
		box-shadow: 0 2em 3em color(display-p3 var(--p3codebg) / 0.25);
	}

	ul.grid.shop img {
		background: color(display-p3 var(--p3ink) / 0.125);
		box-shadow:
			0 0.5em 0.75em color(display-p3 var(--p3codebg) / 0.125),
			inset 0 1px 1px 0 rgba(255, 255, 255, 0),
			inset 0 0 2px 0 color(display-p3 var(--p3ink) / 0);
	}

	ul.grid.shop li:hover img {
		background: color(display-p3 var(--p3link) / 0.25);
		box-shadow:
			0 2em 3em color(display-p3 var(--p3codebg) / 0.25),
			inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.75),
			inset 0 0 24px 0 color(display-p3 var(--p3link) / 1);
	}

	ul.grid.detail li .title {
		color: color(display-p3 var(--p3brightink) / 1);
	}

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

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

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

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

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

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

	h1 a, h1 a:visited {
		color: color(display-p3 var(--p3brightink) / 1);
		text-decoration-color: color(display-p3 var(--p3brightink) / 0.25);
	}

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

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

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

	a:hover, a.hover, h1 a:hover, h2 a:hover, h3 a:hover, .breadcrumbs a:hover {
		color: color(display-p3 var(--p3hover) / 1);
		text-decoration-color: color(display-p3 var(--p3hover) / 0.75);
	}

	h2 a.anchor, h2 a.anchor:active, h2 a.anchor:visited {
		color: color(display-p3 var(--p3brightink) / 1);
		background: color(display-p3 var(--p3darkerink) / 0.25);
	}

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

	blockquote {
		background: color(display-p3 var(--p3codebg) / 0.375);
		color: color(display-p3 var(--p3highlight) / 1);
		border-color: color(display-p3 var(--p3highlight) / 1);
	}

	code {
		color: color(display-p3 var(--p3code) / 1);
	}

	pre {
		background: color(display-p3 var(--p3codebg) / 1);
		border-color: color(display-p3 var(--p3code) / 1);
		text-shadow: 0 0 0.5em color(display-p3 var(--p3code) / 0.5);
	}

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

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

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

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

	p.available::before {
		color: color(display-p3 var(--p3code) / 1);
	}

	p:last-of-type::after {
		color: color(display-p3 var(--p3active) / 1);
	}

	header {
		border-bottom: 2px solid color(display-p3 var(--p3ink) / 0.125);
	}

	footer {
		color: color(display-p3 var(--p3ink) / 1);
		border-top: 2px solid color(display-p3 var(--p3ink) / 0.125);
	}
}

@media (min-width: 1920px) {
	body {
		font-size: 1.5em;
	}
}

@media (min-width: 2240px) {
	body {
		font-size: 2em;
	}
}

@media (max-width: 1080px) {
	.wide img:not(.avatar) {
		width: 100%;
		left: 0;
		transition: 0.5s;
	}
}

@media (max-width: 720px) {
	img {
		width: 100%;
		left: 0;
		transition: 0.5s;
	}

	ul.grid {
		grid-gap: 0.75em;
		transition: 0.5s;
	}

	ul.grid img {
		border-radius: 0.5em;
		transition: border-radius 0.5s;
	}

	body.media img {
		border-radius: 0.09375em;
	}

	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;
		transition: 0.5s;
	}

	ul.grid img {
		border-radius: 0.25em;
		transition: border-radius 0.5s;
	}

	body.media img {
		border-radius: 0.0625em;
	}

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

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