:root {
	color-scheme: light dark;
	--card: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--main-clr: rgb(135, 18, 245);
	--border: 1.6px solid #ccc;
	--icon-clr: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		--card: 0 1px 4px rgba(200, 200, 200, 0.2), 0 1px 2px rgba(200, 200, 200, 0.3);
		--border: 1.6px solid hsl(0, 0%, 48%);
		--icon-clr: white;
	}
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

body {
	font-family: BlinkMacSystemFont, Segoe UI, Roboto, "Fira Sans", Ubuntu, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	font-size: 100%;
	height: 100%;
	margin: 0;
	padding: 1.2em;
	text-rendering: optimizeSpeed;
	color: light-dark(black, hsl(0, 0%, 90%));
	background-color: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 6%));
}

main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em;
}

figure {
	margin: 0;
	margin-bottom: 1em;
	box-shadow: var(--card);
	border-radius: 0.4em;
	position: relative;

	& img {
		border-radius: 0.4em 0.4em 0 0;
		max-width: 100%;
	}

	& .github {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;

		& svg {
			background-color: #fff;
			border-radius: 50%;
		}

		& path {
			d: path(
				"M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
			);
		}
	}

	& figcaption {
		padding: 0.2em 0.5em;
		display: flex;
		column-gap: 0.5em;
		justify-content: space-between;
		align-items: center;
		background-color: light-dark(white, hsl(0, 0%, 16%));

		& img {
			height: 3em;
		}

		& .app-name {
			font-weight: bold;
		}

		& .app-description {
			color: light-dark(black, white);
			font-size: small;
		}
	}
}