: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";
	--flare: "Casserole-Flare";
}

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

html {
	background:
		linear-gradient(180deg, rgba(var(--shade), 1), rgba(var(--bg), 1) 96em),
		rgba(var(--bg), 1);
	background-size: 96em, 0;
	background-position: center;
	background-repeat: repeat-x;
	height: 100%;
	display: table;
	margin: auto;
	font-synthesis: none;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

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: 2em;
	max-width: 32em;
	display: table-cell;
	vertical-align: middle;
}

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);
	font-size: 0.75em;
}

p {
	line-height: 1.5em;
}

small {
	opacity: 0.875;
}

em.slanty {
	color: rgba(var(--active), 1);
	font-weight: bold;
	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;
	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: .125em solid rgba(var(--code), 0.375);
	text-shadow: 0 0 0.5em rgba(var(--code), 0.25);
	padding: 0 0.375em;
	font-feature-settings: "ss01";
}
.zip {
	color: rgba(var(--ink), 1);
	background: rgba(var(--darkerink), 0.125);
	border: .125em solid rgba(var(--darkerink), 0.375);
	text-shadow: 0 0 0.5em rgba(var(--darkerink), 0.25);
	padding: 0 0.375em;
	font-feature-settings: "ss01";
}

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

.resolution {
	background: rgba(var(--codebg), 0.5);
	color: rgba(var(--highlight), 1);
	border: .125em 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 {
	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: .5em 0;
}

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

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

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

hr {
	border: 0.0625em solid rgba(var(--ink), 0.125);
	margin: 1.5em 0;
}

h1 {
	color: rgba(var(--ink), 1);
	font-family: var(--flare);
	margin: 0.25em 0;
	font-size: 2.25em;
	line-height: 1.125em;
}

h2 {
	color: rgba(var(--darkerink), 0.75);
	font-family: var(--sans);
	margin: 0.25em 0;
	font-size: 1.75em;
}

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

h3 {
	color: rgba(var(--darkerink), 0.5);
	font-family: var(--sans);
	margin: 0.25em 0;
	font-size: 1.25em;
}

ul, ol {
	line-height: 1.5em;
}

ul {
	list-style-type: squares;
	padding-left: 1.5em;
	margin: 1em 0;
}

h3 + ul {
	margin: 0 0 1em 0;
}

ul li:not(ul.none li, ul.likecommentsubscribe li) {
	text-indent: -0.3em;
}

ul.none {
	list-style-type: none;
	padding: 0;
}

ul.likecommentsubscribe {
	list-style-type: none;
	padding: 0;
	font-weight: 500;
	font-size: 1em;
}

ul.likecommentsubscribe > a {
	color: rgba(var(--brightink), 1);
	outline: 0.1em solid rgba(var(--ink), 0.125);
	display: inline-block;
	padding: 0 0.5em .0625em 0.5em;
	margin: 0 0.25em 0 0;
	border-radius: 3em;
	text-decoration: none;
	transition: 0.1875s;
}

a.like .icon {
	color: rgba(var(--active), 1);
}

a.like:hover, a.like:active, a.like:active:hover {
	color: rgba(var(--active), 1);
	outline: .1em solid rgba(var(--active), 1);
	background: rgba(var(--active), 0.25);
	text-shadow: none;
}

a.cmnt .icon {
	color: rgba(var(--visited), 1);
}

a.cmnt:hover, a.cmnt:active, a.cmnt:active:hover {
	color: rgba(var(--visited), 1);
	outline: .1em solid rgba(var(--visited), 1);
	background: rgba(var(--visited), 0.25);
	text-shadow: none;
}

a.subscribe .icon {
	color: rgba(var(--highlight), 1);
}

a.subscribe:hover, a.subscribe:active, a.subscribe:active:hover {
	color: rgba(var(--highlight), 1);
	outline: .1em solid rgba(var(--highlight), 1);
	background: rgba(var(--highlight), 0.25);
	text-shadow: none;
}

a.like:active:hover, a.like:active:hover .icon,
a.cmnt:active:hover, a.cmnt:active:hover .icon,
a.subscribe:active:hover, a.subscribe:active:hover .icon {
	color: rgba(var(--brightink), 1);
}

ul.arrows {
	list-style-type: arrows;
}

ul.manicules {
	list-style-type: manicules;
}

ul.downloads {
	list-style-type: downloads;
}

ul ul {
	list-style-type: tofu;
	padding-left: 1.4375em;
	margin: 0.25em 0;
	font-size: 0.875em;
	opacity: 0.875;
}

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

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

@counter-style arrows {
  system: cyclic;
  symbols: "→";
  suffix: " ";
}

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

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

ol {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin: 0.5em 0;
}

ol ol {
	list-style-type: lower-alpha;
	padding-left: 1.4375em;
	margin: 0.25em 0;
	font-size: 0.875em;
	opacity: 0.875;
}

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

ul.grid li {
	margin: 0;
	padding: 0;
	display: table;
}

ul.grid img {
	background: rgba(var(--shade), 1);
	border-radius: 0.75em;
	width: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	display: table-cell;
	transition: border-radius 0.5s;
	transition: 0.25s;
	z-index: 0;
	box-shadow: 0 0.5em 0.75em rgba(var(--codebg), 0.125);
}

body.media-art ul.grid img {
	border-radius: 0.125em;
}

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

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

a, .links {
	color: rgba(var(--link), 1);
	text-decoration-color: rgba(var(--link), 0.25);
	text-underline-offset: .125em;
	text-decoration-thickness: .09375em;
	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.125);
	text-decoration-thickness: .0625em;
}

h2 a, h2 a:visited {
	color: rgba(var(--ink), .75);
	text-decoration-color: rgba(var(--ink), 0.125);
	text-decoration-thickness: .0625em;
}

h3 a, h3 a:visited {
	color: rgba(var(--ink), 0.625);
	text-decoration-color: rgba(var(--ink), 0.125);
	text-decoration-thickness: .0625em;
}

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.5);
}

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: .0625em .25em;
	margin-right: .25em;
	border-radius: .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) 0.25em solid;
	padding: 1em 1.5em 1em 1.25em;
	margin: 2em 0;
}

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

pre code {
	display: block;
	white-space: pre-wrap;
	background: rgba(var(--codebg), 0.5);
	border-left: rgba(var(--code), 1) 0.25em solid;
	text-shadow: 0 0 0.5em rgba(var(--code), 0.5);
	padding: 1em 1.5em 1em 1.25em;
	font-feature-settings: "ss01";
}

.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:last-of-type::after {
	color: rgba(var(--active), 1);
	content: "⬛";
	margin-left: 0.25em;
	font-weight: 100;
}

footer {
	clear: both;
	color: rgba(var(--ink), 1);
	border-top: 0.125em solid rgba(var(--ink), 0.125);
	font-size: 0.875em;
	opacity: 0.75;
	margin: 2.25em 0 0 0;
	padding: 0.5em 0 0 0;
}

footer p:last-of-type::after {
	content: none;
}

@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, 0;
		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);
	}

	em.slanty {
		color: color(display-p3 var(--p3active) / 1);
	}

	.filetype {
		color: color(display-p3 var(--p3code) / 1);
		background: color(display-p3 var(--p3code) / 0.125);
		border: .125em 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: .125em 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: .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: .125em ridge color(display-p3 var(--p3highlight) / 1);
		text-shadow: 0 0 0.5em color(display-p3 var(--p3highlight) / 0.5);
	}

	a.like .icon {
		color: color(display-p3 var(--p3active) / 1);
	}

	a.cmnt .icon {
		color: color(display-p3 var(--p3visited) / 1);
	}

	a.subscribe .icon {
		color: color(display-p3 var(--p3highlight) / 1);
	}

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

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

	ul.likecommentsubscribe > a {
		color: color(display-p3 var(--p3brightink) / 1);
		outline: 0.1em solid color(display-p3 var(--p3ink) / 0.125);
	}

	a.like:hover, a.like:active, a.like:active:hover,
	a.cmnt:hover, a.cmnt:active, a.cmnt:active:hover,
	a.subscribe:hover, a.subscribe:active, a.subscribe:active:hover,
	a.like:active:hover .icon, a.cmnt:active:hover .icon, a.subscribe:active:hover .icon {
		color: color(display-p3 var(--p3brightink) / 1);
	}

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

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

	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, .links {
		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.125);
	}

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

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

	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.5);
	}

	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 code {
		background: color(display-p3 var(--p3codebg) / 0.5);
		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:last-of-type::after {
		color: color(display-p3 var(--p3active) / 1);
	}

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

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

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

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

@media (max-width: 720px) {
	ul.grid {
		grid-gap: 0.75em;
		transition: 0.5s;
	}

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

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