@import "default.css";

#tableTop {
	--column-count: 2;
	display: grid;
	grid-template-columns: repeat(var(--column-count), auto);
	--magnification: 1;
	transform: scale(var(--magnification));
	transform-origin: top center;
}


.card {
	width: 3rem;
	height: 3rem;
	border: 1px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	opacity: 1;
	margin: 0.3rem;
}

.card.found {
	opacity: 0; /* hide when pair found */
}

.cardFaceText {
	transform: scale(3);
	transform-origin: center;
	opacity: 0; /* hide initially */
}

.cardFaceImage {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0; /* hide initially */
}

.cardFaceText.showing {
	opacity: 1;
}

.cardFaceImage.showing {
	opacity: 1;
}