/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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

	--dark: 0.247 0.129 0.573;
	--light: 0.992 0.992 0.992;
	--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);
	--shadow: var(--black);

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

	--code: var(--green);
	--highlight: var(--yellow);
	--highlight-text: var(--dark);

	/* em.slanty (!!) */
	--slanty-em: var(--pink);

	/* .buttonbox strong (heart) */
	--buttonbox-strong: var(--pink);

	/* End Mark Color */
	--end-mark: var(--text);

	/* Unordered List Marker Color */
	--marker: var(--text);

	/* Downloads List Marker Color */
	--downloads-marker: var(--blue);

	/* Indented Links List Marker Color */
	--intended-links-marker: var(--pink);

	/* Red Flags List Marker Color */
	--redflags-marker: var(--red);

	/* Header Unordered List Marker Colors */
	--marker-1: var(--yellow);
	--marker-2: var(--green);
	--marker-3: var(--purple);
	--marker-4: var(--red);

	/* Donate / Buy Buttons & Shop Price Colors */
	--donate: var(--green);
	--price: var(--green);

	/* Metadata Colors */
	--date: var(--green);
	--tag: var(--blue);

	--filetype: var(--purple);
	--zip: var(--orange);
	--resolution: var(--yellow);

	/* Aside Colors */
	--aside: var(--yellow);
	--aside-text: var(--light-yellow);

	/* Blockquote Colors */
	--blockquote-self: var(--purple);
	--blockquote-imessage: var(--blue);
	--blockquote-sms: var(--green);
	--blockquote-tinder: var(--red);
	--blockquote-bumble: var(--yellow);

	/* Fonts */
--sans: "Eudoxus Sans", -apple-system, ui-sans-serif, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('/fonts/EudoxusSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}


html {
	background: color(display-p3 var(--bg) / 1);
	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(--sans);
	font-size: 1.1em;
	padding: 1.5em;
	min-width: 0;
	max-width: 32em;
	margin: auto;
}

body.narrow {
	max-width: 23.75em;
}

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

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

body.wide img:not(.avatar, .logo, ul img, footer img), body.wide video {
	width: 100%;
	margin: 1em 0;
	display: block;
}

.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 strong {
	font-weight: 600;
}

.legal a, .legal a:visited {
	color: inherit;
	text-decoration-color: color(display-p3 var(--text) / 0.125);
}

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

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

.chat {
	margin: 1.5em 0;
}

.chat img, .chat video {
	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, .chat video.right{
	border-radius: 1em 1em 1em 0.125em;
}

.chat img.right, .chat video.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(--blockquote-self) / 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{
	background: color(display-p3 var(--blockquote-imessage) / 0.25);
}
.sms blockquote.right{
	background: color(display-p3 var(--blockquote-sms) / 0.25);
}
.tinder blockquote.right{
	background: color(display-p3 var(--blockquote-tinder) / 0.25);
}
.bumble blockquote.right{
	background: color(display-p3 var(--blockquote-bumble) / 0.25);
}

blockquote.red {
	background: color(display-p3 var(--red) / 0.25);
}
blockquote.orange {
	background: color(display-p3 var(--orange) / 0.25);
}
blockquote.yellow {
	background: color(display-p3 var(--yellow) / 0.25);
}
blockquote.green {
	background: color(display-p3 var(--green) / 0.25);
}
blockquote.blue {
	background: color(display-p3 var(--blue) / 0.25);
}
blockquote.purple {
	background: color(display-p3 var(--purple) / 0.25);
}
blockquote.pink {
	background: color(display-p3 var(--pink) / 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:not(.group) 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);
}

figure {
	margin: 0;
	padding: 0;
}

figcaption {
	padding-bottom: 1em;
}

/* figcaption::before {
	content: "↑ ";
	opacity: 0.5;
} */

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

.quiet {
	opacity: 0.75;
}

em.slanty {
	color: color(display-p3 var(--slanty-em) / 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(--filetype) / 1);
	background: color(display-p3 var(--filetype) / 0.125);
	border: 1.5px solid color(display-p3 var(--filetype) / 0.375);
	text-shadow: 0 0 0.5em color(display-p3 var(--filetype) / 0.25);
	font-feature-settings: "ss01";
}

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

.date {
	background: color(display-p3 var(--date) / 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;
}

.tag {
	background: color(display-p3 var(--tag) / 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(--dark) / 0.5);
	color: color(display-p3 var(--resolution) / 1);
	border: 1.5px ridge color(display-p3 var(--resolution) / 1);
	text-shadow: 0 0 0.5em color(display-p3 var(--resolution) / 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(--shadow) / 0.25);
	width: 640px;
	margin: 0.5em 0 0.5em -64px;
	height: auto;
	position: relative;
	border-radius: 0.125em;
}

img.normalize, video.normalize {
	width: 100%;
	margin: 0.5em 0;
}

img.small, video.small {
	display: block;
	width: 75%;
	margin: 0.5em auto;
}

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

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

div.youtube {
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	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(--shadow) / 0.25);
}

mark {
	background: color(display-p3 var(--highlight) / 1);
	color: color(display-p3 var(--highlight-text) / 1);
}

::selection {
	background: color(display-p3 var(--highlight) / 1);
	color: color(display-p3 var(--highlight-text) / 1);
}

::target-text {
	background: color(display-p3 var(--highlight) / 1);
	color: color(display-p3 var(--highlight-text) / 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(.avatar):hover .avatar,
a .logo:hover {
	opacity: 0.75;
}

a:has(.avatar):active .avatar,
a:has(.avatar):active:hover .avatar,
a .logo:active,
a .logo:active:hover {
	opacity: 0.5;
}

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

header h1:has(img) {
	margin: 0.75em 0 0.5em 0;
}

h1 {
	color: color(display-p3 var(--text) / 1);
	font-family: var(--sans);
	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: 1em;
	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.5em;
	margin: 0.125em 0;
	border-radius: 0.25em;
	text-decoration: none;
	font-weight: 600;
}

.button.jumbo, .button.jumbo:visited {
	color: color(display-p3 var(--text) / 1);
	border: 1.5px solid color(display-p3 var(--text) / 0.125);
	background: color(display-p3 var(--text) / 0.0625);
	text-align: center;
	padding: 1em;
	margin: 1.5em auto 0.5em auto;
	width: calc(100% - 2em);
	border-radius: 0.5em;
}
a.button.jumbo:hover {
	color: color(display-p3 var(--text) / 1) !important;
	border: 1.5px solid color(display-p3 var(--text) / 0.25);
	background: color(display-p3 var(--text) / 0.125);
}
a.button.jumbo:active {
	color: color(display-p3 var(--text) / 0.5) !important;
	border: 1.5px solid color(display-p3 var(--text) / 0.125);
	background: color(display-p3 var(--text) / 0.0625);
}

.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(--donate) / 1);
	border: 1.5px solid color(display-p3 var(--donate) / 0.25);
	background: color(display-p3 var(--donate) / 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: block;
}

.buttonbox .buttons {
	display: inline-block;
}

h1 .button, h2 .button, h3 .button {
	font-size: 0.5em;
	vertical-align: middle;
	padding: 0.25em 0.375em;
}

ul .button {
	padding: 0.125em 0.375em;
	margin: 0;
}

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

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

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

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

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

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

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

ul.redflags li::marker {
	color: color(display-p3 var(--redflags-marker) / 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);
}

.home ul ul {
	width: 100%;
}

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

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

.pixel li { list-style-type: none; position: relative; }
.pixel li::before {
	content: " ";
	background-size: contain;
	width: 16px;
	height: 16px;
	position: absolute;
	left: -24px;
	top: 50%;
	transform: translateY(-50%);
	image-rendering: pixelated;
}
.pixel .blog::before { background-image: url("/files/images/pixel/blog.gif") }
.pixel .icons::before { background-image: url("/files/images/pixel/icons.gif") }
.pixel .wallpapers::before { background-image: url("/files/images/pixel/wallpapers.gif") }
.pixel .photos::before { background-image: url("/files/images/pixel/photos.gif") }
.pixel .sketchbook::before { background-image: url("/files/images/pixel/sketchbook.gif") }
.pixel .intro::before { background-image: url("/files/images/pixel/intro.gif") }
.pixel .colophon::before { background-image: url("/files/images/pixel/colophon.gif") }
.pixel .features::before { background-image: url("/files/images/pixel/features.gif") }
.pixel .portfolio::before { background-image: url("/files/images/pixel/portfolio.gif") }
.pixel .projects::before { background-image: url("/files/images/pixel/projects.gif") }
.pixel .favorites::before { background-image: url("/files/images/pixel/favorites.gif") }
.pixel .moments::before { background-image: url("/files/images/pixel/moments.gif") }
.pixel .evergreen::before { background-image: url("/files/images/pixel/evergreen.gif") }
.pixel .media-art::before { background-image: url("/files/images/pixel/media-art.gif") }
.pixel .apps::before { background-image: url("/files/images/pixel/apps.gif") }
.pixel .shop::before { background-image: url("/files/images/pixel/shop.gif") }
.pixel .gratuity::before { background-image: url("/files/images/pixel/gratuity.gif") }
.pixel .guide-rules::before { background-image: url("/files/images/pixel/guide-rules.gif") }
.pixel .yellow-pages::before { background-image: url("/files/images/pixel/yellow-pages.gif") }
.pixel .archive::before { background-image: url("/files/images/pixel/archive.gif") }

.pixel .tdr::before { background-image: url("/files/images/pixel/tdr.gif") }
.pixel .omikoshi::before { background-image: url("/files/images/pixel/omikoshi.gif") }
.pixel .star-wars::before { background-image: url("/files/images/pixel/star-wars.gif") }
.pixel .tv::before { background-image: url("/files/images/pixel/tv.gif") }
.pixel .film::before { background-image: url("/files/images/pixel/film.gif") }
.pixel .nes::before { background-image: url("/files/images/pixel/nes.gif") }
.pixel .snes::before { background-image: url("/files/images/pixel/snes.gif") }
.pixel .n64::before { background-image: url("/files/images/pixel/n64.gif") }
.pixel .wii::before { background-image: url("/files/images/pixel/wii.gif") }
.pixel .switch::before { background-image: url("/files/images/pixel/switch.gif") }
.pixel .switch2::before { background-image: url("/files/images/pixel/switch2.gif") }
.pixel .gb::before { background-image: url("/files/images/pixel/gb.gif") }
.pixel .gbc::before { background-image: url("/files/images/pixel/gbc.gif") }
.pixel .gba::before { background-image: url("/files/images/pixel/gba.gif") }
.pixel .genesis::before { background-image: url("/files/images/pixel/genesis.gif") }
.pixel .playdate::before { background-image: url("/files/images/pixel/playdate.gif") }
.pixel .ps::before { background-image: url("/files/images/pixel/ps.gif") }
.pixel .ps5::before { background-image: url("/files/images/pixel/ps5.gif") }

ul.grid {
	max-width: 72em;
	list-style-type: none;
	padding: 0;
	margin: 1em 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.pair {
	grid-template-columns: repeat(auto-fill, minmax(calc((100% - 3em) / 2), 1fr));
}

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 {
	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(--shadow) / 0.25);
}

li img.badge, aside img.badge {
	width: 44px !important;
	height: 15.5px !important;
	vertical-align: middle;
}

img.badge {
	image-rendering: pixelated;
	width: 88px !important;
	height: 31px !important;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

img.badge.senjafuda {
	width: 31px !important;
	height: 88px !important;
}
img.badge:hover {
	opacity: 0.75;
}
img.badge:active {
	opacity: 0.5;
}

div.badgebox a {
	width: 88px !important;
	height: 31px !important;
}

div.badgebox:has(.senjafuda) a {
	width: 31px !important;
	height: 88px !important;
}

div.buttonbox img.badge {
	vertical-align: middle;
	top: -1.5px;
}

div.badgebox {
	margin: 0.5em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

.buttonbox {
	overflow: hidden;
	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);
}

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

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

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 {
	scale: 103.125%;
	transition: 125ms;
	z-index: 100;
	box-shadow: 0 2em 3em color(display-p3 var(--shadow) / 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(--shadow) / 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(--shadow) / 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(--price) / 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 {
	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, a:active:hover {
	color: color(display-p3 var(--active) / 1) !important;
	text-decoration-color: color(display-p3 var(--active) / 0.375) !important;
}

dl a, dl a:visited,
header ul a, header ul a:visited,
ul.downloads a, ul.downloads 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 {
	color: color(display-p3 var(--hover) / 1) !important;
	text-decoration-color: color(display-p3 var(--hover) / 0.5) !important;
}

h2 a.anchor, h2 a.anchor:active, h2 a.anchor:visited {
	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(--hover) / 1);
	background: color(display-p3 var(--hover) / 0.25);
}

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

table {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	border: none;
	background: none;
	margin: 1em auto;
}

table.fixed {
	table-layout: fixed;
}

td.year {
	display: none;
}

td, th {
	height: 2em;
	min-width: 1.5em;
	padding: 0.25em 0.5em;
	border: 1.5px solid color(display-p3 var(--bg) / 1);
}
th {
	background-color: color(display-p3 var(--text) / 0.125);
}
td {
	background-color: color(display-p3 var(--text) / 0.0625);
}

/* div:has(.espresso) {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 1rem;
	justify-content: center;
} */

table:has(.espresso) {
	text-align: left;
	table-layout: fixed;
}

table:has(.espresso) th {
	text-align: left;
}

td.espresso {
	color: whitesmoke;
	background-color: color(display-p3 0.298 0.161 0.118);
}

td.milk {
	color: color(display-p3 0.298 0.161 0.118);
	background-color: color(display-p3 0.9 0.85 0.8);
}

td.foam {
	color: color(display-p3 0.298 0.161 0.118);
	background-color: whitesmoke;
}

td.red {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--red) / 0.75);
}

td.orange {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--orange) / 0.75);
}

td.yellow {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--yellow) / 0.75);
}

td.green {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--green) / 0.75);
}

td.blue {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--blue) / 0.75);
}

td.violet {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--purple) / 0.75);
}

td.pink {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--pink) / 0.75);
}

td.gray {
	color: color(display-p3 var(--white) / 1);
	background-color: color(display-p3 var(--text) / 0.75);
}

aside {
	border-radius: 0.125em;
	background: color(display-p3 var(--aside) / 0.25);
	color: color(display-p3 var(--aside-text) / 1);
	padding: 0.75em;
	margin: 1em 0;
}

aside > :first-child, blockquote > :first-child {
	margin-block-start: 0;
}

aside > :last-child, blockquote > :last-child {
	margin-block-end: 0;
}

aside h1, aside h2, aside h3, aside li::marker {
	color: color(display-p3 var(--aside) / 0.75);
}

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

blockquote {
	border-radius: 1em;
	background: color(display-p3 var(--text) / 0.125);
	color: color(display-p3 var(--text) / 0.75);
	padding: 1em 1.5em;
	margin: 1em 0;
}

code {
	color: color(display-p3 var(--code) / 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(--code) / 1) 2px solid;
	text-shadow: 0 0 0.5em color(display-p3 var(--code) / 1);
	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);
}

p.available::before {
	color: color(display-p3 var(--available) / 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;
	/* position: sticky;
	top: 0;
	background-color: color(display-p3 var(--bg) / 1); */
}

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

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

img + .buttons {
	margin-top: 1em;
}

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

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

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

@media (max-width: 512px) {

	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.375em 0.5em 0.5em 0.5em;
	}
	ul .button {
		padding: 0 0.375em 0.125em 0.375em;
	}
}

/* @media (prefers-color-scheme: dark) {
	html {
		background: color(display-p3 var(--black) / 1);
	}
} */