@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

body {
	background-color: rgb(128, 128, 128);
	display: grid;
	place-content: center;
	height: 100vh;
}

.points {
	text-align: center;
	margin: 1rem;
}

.game {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	width: 400px;
	margin: auto;
	gap: 1rem;
}

.card {
	width: 5rem;
	height: 8rem;
	border-radius: 10px;
	background-color: blanchedalmond;
	transition: 0.5s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 3px solid #363636;
}

.card img {
	max-width: 80%;
	opacity: 0;
	transform: rotateY(180deg);
	height: 0;
	transition: 0.5s ease;
}

.card.active {
	transform: rotateY(180deg);
}

.card.active img {
	height: fit-content;
	opacity: 1;
}

.card.disabled {
	opacity: 0;
	transform: scale(0) rotateY(180deg);
	pointer-events: none;
}

.card.disabled img {
	height: fit-content;
	opacity: 1;
}

.play-again {
	text-align: center;
	position: absolute;
	top: 40%;
	width: 100%;
	margin: auto;
	pointer-events: none;
	opacity: 0;
	transition: 0.3s ease;
	cursor: pointer;
}

.play-again i {
	font-size: 5rem;
	border-radius: 50%;
	padding: 0.8rem 1rem;
	color: rgb(30, 68, 30);
	background-color: rgb(60, 189, 99);
}

.play-again h1 {
	padding: 0.5rem 0;
	color: rgb(30, 68, 30);
}

.play-again.show {
	pointer-events: all;
	opacity: 1;
}