:root {
	--jp-surface: #f7f6f1;
	--jp-surface-strong: #efede5;
	--jp-ink: #1f2a38;
	--jp-accent: #bb2d3b;
	--jp-accent-soft: #f7d6d1;
}

body {
	background: #ffffff;
}

main.site-main {
	background: #ffffff;
	color: var(--jp-ink);
	line-height: 1.7;
	padding: 2.5rem 1rem 4rem;
}

.starter-template h2 {
	color: var(--jp-ink);
	letter-spacing: 0.02em;
	margin-bottom: 1rem;
}

.starter-template img.img-fluid {
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(31, 42, 56, 0.12);
	margin-bottom: 1rem;
}

.starter-template iframe {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	box-shadow: 0 10px 22px rgba(31, 42, 56, 0.15);
	display: inline-block;
	height: auto;
	margin: 0.35rem 0.5rem;
	max-width: 100%;
	width: min(100%, 360px);
}

.card {
	border-radius: 16px;
	border: 1px solid rgba(31, 42, 56, 0.12);
	box-shadow: 0 12px 25px rgba(31, 42, 56, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: 0 18px 30px rgba(31, 42, 56, 0.15);
	transform: translateY(-4px);
}

.card img {
	background: #ffffff;
	border-radius: 16px 16px 0 0;
	height: 200px;
	object-fit: contain;
	padding: 0.75rem;
	width: 100%;
}

.card-body {
	background: #ffffff;
	border-radius: 0 0 16px 16px;
}

.table {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
}

.table thead {
	background: var(--jp-accent-soft);
}

.table th {
	color: var(--jp-ink);
}

.social-links {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 20px rgba(31, 42, 56, 0.08);
	padding: 1rem 1.25rem;
}

.social-links li {
	margin-bottom: 0.45rem;
}

.social-links li:last-child {
	margin-bottom: 0;
}

@media (max-width: 576px) {
	main.site-main {
		margin: 1rem 0.5rem 2rem;
		padding: 1.25rem 0.9rem 2rem;
	}

	.card img {
		height: 180px;
	}
}

/* ---------------------------- */
/* Counter */
/* reset once per table */
table.table-hover {
	counter-reset: myCounter;
}

/* increment + print it where you want */
table.table-hover .thisCounter::before {
	counter-increment: myCounter;
	content: counter(myCounter);
	display: inline-block;
}