@import url("../common/base.css");
@import url("../common/icons.css");
@import url("../common/components/card.css");
@import url("../common/components/badge.css");

html {
	font-size: 100%;
}

body {
	font: 100%/1.5 system-ui, sans-serif;
	padding: 1em;
	max-width: 60em;
	margin: auto;
}

h1 {
	font-size: 250%;
	letter-spacing: -.02em;
	font-family: ui-rounded, system-ui, sans-serif;
	margin: 0;
}

#apps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1em;
	font-size:
}

a:has(> .card:only-child) {
	text-decoration: none;
	color: inherit;
}

.card {
	--hero-height: 10em;
	--color-bg-soft: oklch(from var(--color) var(--tint-95));

	h2 {
		&::before {
			content: "Zoe learns… ";
			display: block;
			color: var(--color-neutral);
			font-weight: 600;
			font-size: .75rem;
		}

		&:is(.age-baby *)::before {
			content: "👶🏼 Baby Zoe learns… ";
		}

		font-size: 2rem;
	}
}

.type-game .badge.type {
	--color: var(--color-purple);
}

.type-explore .badge.type {
	--color: var(--color-cyan);
}

.area-language .badge.area {
	--color: var(--color-blue);
}

.area-math .badge.area {
	--color: var(--color-pink);
}

.badge {
	text-transform: capitalize;
}