:root {
	color-scheme: light;
	--bg: #F5F3FF;
	--surface: #F8F9FA;
	--ink: #20253B;
	--muted: #515b70;
	--accent: #653BC0;
	--soft: #EEE5FF;
	--line: #BCB9CC;
	--round: 1.3rem;
	--cursor: auto;
	--pointer: pointer;
}

:root[data-mode="dark"] {
	color-scheme: dark;
	--bg: #111522;
	--surface: #202637;
	--ink: #F4F5FF;
	--muted: #C1C9DF;
	--accent: #C9B1FF;
	--soft: #30304E;
	--line: #65718B;
}

body[data-page="rocks-minerals"] {
	--accent: #855024;
	--soft: #f6e6cf;
}

body[data-page="minecraft"] {
	--accent: #28652f;
	--soft: #E0F1D7;
}

body[data-page="paper-airplanes"] {
	--accent: #185e9a;
	--soft: #DCEDFB;
}

body[data-page="pokemon"] {
	--accent: #795200;
	--soft: #FFF1B8;
}

body[data-page="jokes"] {
	--accent: #f01c1c;
	--soft: #ffe0ee;
}

:root[data-mode="dark"] body[data-page="rocks-minerals"] {
	--accent: #f3bd80;
	--soft: #3e3029;
}

:root[data-mode="dark"] body[data-page="minecraft"] {
	--accent: #a5df89;
	--soft: #213b2c;
}

:root[data-mode="dark"] body[data-page="paper-airplanes"] {
	--accent: #1ce7f0;
	--soft: #20364b;
}

:root[data-mode="dark"] body[data-page="pokemon"] {
	--accent: #ffda75;
	--soft: #3e3623;
}

:root[data-mode="dark"] body[data-page="jokes"] {
	--accent: #ffacd2;
	--soft: #42283a;
}

* {
	box-sizing: border-box;
}

html {
	font-size: clamp(16px, 0.85rem + 0.25vw, 22px);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: ui-rounded, 'Trebuchet MS', Verdana, sans-serif;
	line-height: 1.65;
	cursor: var(--cursor);
}

h1,
h2,
h3 {
	line-height: 1.15;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.2rem, 5vw, 4.7rem);
	margin: 0.3em 0;
}

h2 {
	font-size: clamp(1.4rem, 2.5vw, 2rem);
}

a {
	color: var(--accent);
	text-underline-offset: 0.2em;
}

button, a, summary {
	cursor: var(--pointer);
}

button, input {
	font: inherit;
}

button, .button,
button.primary, .button.primary {
	display: inline-block;
	min-height: 44px;
	padding: 0.65em 1em;
	color: var(--surface);
	background: var(--accent);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid var(--accent);
	border-radius: 999px;
}

button.secondary, .button.secondary {
	color: var(--accent);
	background: transparent;
}

button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

button:hover,
.button:hover {
	filter: brightness(1.1);
}

button:active {
	transform: scale(0.96);
}

:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 5px;
}

header,
main > *,
footer {
	width: min(92%, 88rem);
	margin-inline: auto;
}

.skip {
	position: absolute;
	top: -10rem;
	left: 1rem;
	padding: 1rem;
	background: var(--surface);
	z-index: 10;
}

.skip:focus {
	top: 1rem;
}

.site-header {
	padding-block: 1rem;
	border-bottom: 2px solid var(--line);
}

.brand {
	font-weight: 900;
	font-size: 1.35rem;
	text-decoration: none;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	align-items: center;
}

nav a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.7rem;
	text-decoration: none;
	font-weight: 700;
}

nav a[aria-current="page"],
nav a:hover {
	background: var(--soft);
}

nav button {
	font-size: 0.9rem;
}

html body .hidden {
	display: none !important;
	visibility: hidden !important;
}

main {
	padding-bottom: 3rem;
}

.hero {
	width: 100%;
	position: relative;
	margin-block: 1.5rem;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: var(--soft);
	border: 2px solid var(--line);
	overflow: hidden;
}

.eyebrow {
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero-icon {
	font-size: clamp(3rem, 7vw, 6rem);
	float: right;
	margin-left: 1rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1.25rem;
}

.card {
	display: flex;
	padding: 1.4rem;
	min-width: 0;
	flex-direction: column;
	background: var(--surface);
	border: 2px solid var(--line);
	border-radius: var(--round);
}

.card header,
.card header.dir-row {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.card header.dir-col {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.card h2,
.card h3 {
	margin-top: 0;
}

.card h3 {
	margin-bottom: 0;
	font-size: 1.4rem;
}

.card .card-feature-text {
	margin: 0.5rem 0 0;
	color: var(--accent);
	font-size: 180%;
	font-weight: 700;
	line-height: 1.4;
}

.card > *:nth-last-child(2) {
	margin-bottom: 2.25rem;
}

.card > button:last-child, .card > .button:last-child {
	margin-top: auto;
	align-self: flex-start;
}

.card .button-group {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.card .button-group > *:not(:last-child) {
	margin-right: 1rem;
}

.card .button-group:last-child {
	margin-top: auto;
}

[hidden] {
	display: none !important;
}

@keyframes reveal-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Animate only when the user has not requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.animate:not([hidden]) {
		animation: reveal-in 250ms ease-out both;
	}
}

/* Minecraft icon */
.card .card-icon.minecraft {
	display: block;
	width: var(--block-size);
	--block-size: min(80vw, 40px);
	--pixel: calc(var(--block-size) / 4);
	--grass: #91bd59;
	--grass-light: #a6cc70;
	--grass-dark: #638b3f;
	--dirt: #866043;
	--dirt-light: #a17b58;
	--dirt-dark: #674831;
	--stone: #938477;
    background:
		repeating-linear-gradient(90deg, var(--grass) 0 var(--pixel), var(--grass-light) var(--pixel) calc(var(--pixel) * 2), var(--grass) calc(var(--pixel) * 2) calc(var(--pixel) * 3), var(--grass-dark) calc(var(--pixel) * 3) calc(var(--pixel) * 4)) 0 0 / calc(var(--pixel) * 4) var(--pixel) repeat-x,
		repeating-linear-gradient(90deg, var(--grass-dark) 0 var(--pixel), var(--grass) var(--pixel) calc(var(--pixel) * 3), var(--grass-light) calc(var(--pixel) * 3) calc(var(--pixel) * 4)) var(--pixel) var(--pixel) / calc(var(--pixel) * 4) var(--pixel) repeat-x,
		repeating-linear-gradient(90deg, var(--grass) 0 calc(var(--pixel) * 2), var(--grass-dark) calc(var(--pixel) * 2) calc(var(--pixel) * 3), var(--grass) calc(var(--pixel) * 3) calc(var(--pixel) * 4)) 0 calc(var(--pixel) * 2) / calc(var(--pixel) * 4) var(--pixel) repeat-x,
		repeating-linear-gradient(90deg, var(--grass-dark) 0 var(--pixel), transparent var(--pixel) calc(var(--pixel) * 2), var(--grass) calc(var(--pixel) * 2) calc(var(--pixel) * 4), transparent calc(var(--pixel) * 4) calc(var(--pixel) * 5)) 0 calc(var(--pixel) * 3) / calc(var(--pixel) * 5) var(--pixel) repeat-x,
		repeating-linear-gradient(90deg, transparent 0 calc(var(--pixel) * 2), var(--grass-dark) calc(var(--pixel) * 2) calc(var(--pixel) * 3), transparent calc(var(--pixel) * 3) calc(var(--pixel) * 5)) 0 calc(var(--pixel) * 4) / calc(var(--pixel) * 5) var(--pixel) repeat-x,
		repeating-linear-gradient(90deg, var(--dirt-light) 0 var(--pixel), transparent var(--pixel) calc(var(--pixel) * 4), var(--dirt-dark) calc(var(--pixel) * 4) calc(var(--pixel) * 5), transparent calc(var(--pixel) * 5) calc(var(--pixel) * 7)) 0 calc(var(--pixel) * 5) / calc(var(--pixel) * 7) calc(var(--pixel) * 3) repeat,
		repeating-linear-gradient(90deg, transparent 0 calc(var(--pixel) * 2), var(--stone) calc(var(--pixel) * 2) calc(var(--pixel) * 3), transparent calc(var(--pixel) * 3) calc(var(--pixel) * 5), var(--dirt-light) calc(var(--pixel) * 5) calc(var(--pixel) * 6), transparent calc(var(--pixel) * 6) calc(var(--pixel) * 8)) var(--pixel) calc(var(--pixel) * 6) / calc(var(--pixel) * 8) calc(var(--pixel) * 3) repeat,
		repeating-linear-gradient(90deg, var(--dirt-dark) 0 var(--pixel), transparent var(--pixel) calc(var(--pixel) * 3), var(--dirt-light) calc(var(--pixel) * 3) calc(var(--pixel) * 4), transparent calc(var(--pixel) * 4) calc(var(--pixel) * 6)) calc(var(--pixel) * 2) calc(var(--pixel) * 7) / calc(var(--pixel) * 6) calc(var(--pixel) * 3) repeat;
    background-color: var(--dirt);
	aspect-ratio: 1;
}

/* Paper airplane icon */
.card .card-icon.paper-airplane {
	--plane-size: clamp(40px, 65vw, 40px);
	--paper-light: #FFFFFF;
	--paper-mid: #dce6f0;
	--paper-dark: #a5b8cc;
	--plane-shadow: rgb(25 45 70 / 22%);

	position: relative;
	width: var(--plane-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;

	filter: drop-shadow(
		0
		calc(var(--plane-size) * 0.035)
		calc(var(--plane-size) * 0.025)
		var(--plane-shadow)
	);

	/* Lower wing */
	background: var(--paper-mid);
	clip-path: polygon(
		0% 32%,
		100% 0%,
		70% 100%,
		43% 70%,
		27% 88%,
		29% 51%
	);
}

.card .card-icon.paper-airplane::before,
.card .card-icon.paper-airplane::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Upper wing */
.card .card-icon.paper-airplane::before {
	background: var(--paper-light);
	clip-path: polygon(
		0% 32%,
		100% 0%,
		29% 51%
	);
}

/* Folded center */
.card .card-icon.paper-airplane::after {
	background: var(--paper-dark);
	clip-path: polygon(
		29% 51%,
		100% 0%,
		43% 70%,
		27% 88%
	);
}

.pikachu {
  --yellow: #ffda08;
  --light-yellow: #ffe339;
  --shade: #e8ae00;
  --ink: #171714;
  --red: #ef5036;
  --mouth: #742c2d;
  --pink: #ed8087;

  position: relative;
  isolation: isolate;
  width: min(90vw, 440px);
  aspect-ratio: 1;
}

.pikachu,
.pikachu *,
.pikachu::before,
.pikachu::after,
.pikachu *::before,
.pikachu *::after {
  box-sizing: border-box;
}

.pikachu * {
	position: absolute;
}

/* Lightning-bolt silhouette, with an inset yellow face */
.tail {
	z-index: 0;
	inset: 36% 1% 13% 57%;
	background: var(--ink);
	clip-path: polygon(
		91% 0,
		100% 40%,
		65% 48%,
		74% 62%,
		48% 72%,
		55% 85%,
		12% 100%,
		0 86%,
		32% 72%,
		23% 57%,
		48% 44%,
		33% 26%
	);
}

.tail::before {
  content: "";
  position: absolute;
  inset: 2.5%;
  background: linear-gradient(
    172deg,
    var(--yellow) 0 39%,
    var(--shade) 40% 73%,
    #a35e2f 74%
  );
  clip-path: inherit;
}

/* Ears */
.ear {
  z-index: 1;
  overflow: hidden;
  border: max(2px, 0.009em) solid var(--ink);
  background: var(--yellow);
}

.ear--left {
  left: 23%;
  top: 4%;
  width: 12%;
  height: 37%;
  border-radius: 12% 85% 25% 65%;
  transform: rotate(-17deg);
  transform-origin: 70% 100%;
}

.ear--left::before {
  content: "";
  position: absolute;
  inset: -2% -5% 68% -5%;
  background: var(--ink);
  transform: rotate(18deg);
}

.ear--right {
  left: 48%;
  top: 28%;
  width: 43%;
  height: 11%;
  border-radius: 65% 90% 60% 40%;
  transform: rotate(5deg);
}

.ear--right::before {
  content: "";
  position: absolute;
  inset: -10% -2% -10% 77%;
  background: var(--ink);
  transform: rotate(14deg);
}

/*
 * Relative font sizing makes em-based outlines scale with the art.
 * The percentage geometry scales with the square container.
 */
.pikachu {
  container-type: inline-size;
}

.pikachu > * {
  font-size: 100cqi;
}

.ear {
  border-width: 0.009em;
}

/* Rounded seated body */
.body {
  z-index: 2;
  left: 27%;
  top: 56%;
  width: 46%;
  height: 35%;
  border: 0.009em solid var(--ink);
  border-radius: 45% 46% 30% 30% / 50% 50% 25% 25%;
  background: var(--yellow);
  box-shadow: inset 0 -0.026em 0 var(--shade);
}

/* Feet */
.foot {
  z-index: 3;
  top: 76%;
  width: 10%;
  height: 16%;
  overflow: hidden;
  border: 0.008em solid var(--ink);
  background: var(--yellow);
}

.foot--left {
  left: 26%;
  border-radius: 65% 40% 35% 65%;
  transform: rotate(-23deg);
}

.foot--right {
  left: 64%;
  border-radius: 40% 65% 65% 35%;
  transform: rotate(23deg);
}

.foot::before,
.foot::after {
  content: "";
  position: absolute;
  top: 17%;
  width: 8%;
  height: 40%;
  border-radius: 50%;
  background: var(--ink);
}

.foot::before {
  left: 22%;
}

.foot::after {
  left: 43%;
  top: 10%;
}

/* Broad head, blending into the body at the bottom */
.head {
	z-index: 4;
	left: 27%;
	top: 29%;
	width: 48%;
	height: 39%;
	border: 0.009em solid var(--ink);
	border-bottom-color: transparent;
	border-radius: 43% 48% 41% 44% / 39% 41% 56% 55%;
	background: var(--yellow);
}

.head::after {
	content: "";
	position: absolute;
	left: 21%;
	bottom: -5%;
	width: 58%;
	height: 19%;
	background: var(--yellow);
	border-radius: 0 0 50% 50%;
}

/* Eyes and highlights */
.eye {
	z-index: 6;
	top: 40%;
	width: 6%;
	height: 7%;
	border-radius: 50%;
	background: var(--ink);
}

.eye--left {
	left: 33%;
	transform: rotate(14deg);
}

.eye--right {
	left: 61%;
	transform: rotate(-14deg);
}

.eye::before {
	content: "";
	position: absolute;
	top: 12%;
	left: 20%;
	width: 46%;
	height: 43%;
	border-radius: 50%;
	background: #FFFFFF;
}

/* Tiny nose */
.nose {
	z-index: 7;
	left: 47%;
	top: 47%;
	width: 3.2%;
	height: 1.5%;
	background: var(--ink);
	clip-path: polygon(0 10%, 100% 10%, 54% 100%);
	border-radius: 40%;
}

/* Open mouth */
.mouth {
	z-index: 6;
	left: 44%;
	top: 51%;
	width: 10%;
	height: 10%;
	overflow: hidden;
	border: 0.007em solid var(--ink);
	border-radius: 18% 18% 48% 48% / 15% 15% 85% 85%;
	background: var(--mouth);
}

.tongue {
	left: 7%;
	bottom: -8%;
	width: 95%;
	height: 63%;
	border-radius: 50% 50% 0 0;
	background: var(--pink);
}

/* Two curved smile lobes cover the mouth's upper corners */
.smile {
	z-index: 7;
	top: 48.8%;
	width: 7%;
	height: 4%;
	border-bottom: 0.006em solid var(--ink);
	border-radius: 0 0 50% 50%;
	background: var(--yellow);
}

.smile--left {
	left: 42.2%;
	transform: rotate(-9deg);
}

.smile--right {
	left: 48.7%;
	transform: rotate(9deg);
}

/* Red cheeks */
.cheek {
	z-index: 7;
	top: 48%;
	width: 7.5%;
	height: 9%;
	border: 0.006em solid var(--ink);
	border-radius: 50%;
	background: var(--red);
}

.cheek--left {
	left: 27.7%;
	transform: rotate(-13deg);
}

.cheek--right {
	left: 67%;
	transform: rotate(13deg);
}

/* Folded front paws */
.paw {
	z-index: 8;
	top: 63%;
	width: 15%;
	height: 19%;
	border: 0.007em solid var(--ink);
	background: var(--yellow);
}

.paw--left {
	left: 31%;
	border-top-color: transparent;
	border-radius: 45% 55% 25% 55%;
	transform: rotate(-34deg);
}

.paw--right {
	left: 54%;
	border-top-color: transparent;
	border-radius: 55% 45% 55% 25%;
	transform: rotate(34deg);
}

.paw::after {
	content: "";
	position: absolute;
	bottom: -1%;
	left: 38%;
	width: 35%;
	height: 10%;
	background: var(--yellow);
	border-bottom: 0.006em solid var(--ink);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 65%,
		80% 100%,
		60% 65%,
		40% 100%,
		20% 65%,
		0 100%
	);
}

section + section {
	margin-top: 2rem;
}

figure {
	margin: 0;
}

img, video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.8rem;
}

figcaption, small {
	color: var(--muted);
}

iframe {
	display: block;
	aspect-ratio: 16/9;
	width: 100%;
	border: 0;
	border-radius: 0.8rem;
}

.media-slot {
	padding: 1rem;
	border: 2px dashed var(--line);
	border-radius: 0.8rem;
	background: var(--soft);
}

.game-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.game-grid button {
	padding: 0.25rem;
	aspect-ratio: 1;
	color: var(--ink);
	background-color: var(--soft);
	font-size: clamp(1.6em, 6vw, 3rem);
	border-radius: 0.8rem;
}

.game-grid button:hover {
	filter: brightness(0.9);
}

.target {
	box-shadow: inset 0 0 0 5px var(--ink);
}

.score {
	font-weight: 900;
}

.click-pop {
	position: fixed;
	pointer-events: none;
	z-index: 100;
	animation: pop .65s ease-out forwards;
	font-size: 1.5rem;
	transform: translate(-50%, -50%);
}

@keyframes pop {
	to {
		opacity: 0;
		transform: translate(-50%, -180%) rotate(25deg) scale(1.6);
	}
}

footer {
	border-top: 2px solid var(--line);
	padding: 1.5rem 0 2.5rem;
}

details {
	margin-top: 1rem;
}

summary {
	font-weight: 700;
}

code {
	overflow-wrap: anywhere;
}

body[data-page="minecraft"] .card,
body[data-page="minecraft"] .hero {
	border-radius: 0.25rem;
	box-shadow: 5px 5px 0 var(--line);
}

body[data-page="rocks-minerals"] .hero {
	border-style: dashed;
}

body[data-page="paper-airplanes"] .hero {
	background-image: repeating-linear-gradient(0deg, transparent, transparent 31px, var(--line) 32px, transparent 33px);
}

body[data-page="jokes"] .hero {
	border-radius: 2.5rem 0.6rem 2.5rem 0.6rem;
}

@media(max-width:479px) {
	.grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media(min-width:1600px) {
	.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media(min-width:2400px) {
	html {
		font-size: 26px;
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto;
	}

	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}

	button:active {
		transform: none;
	}
}