:root {
	font-size: 25px;
}

body {
	display: grid;
	justify-content: space-around;
	background-color: #dadada;
	grid-template-columns: 1.2fr 1fr;
	grid-template-areas:
		"left right"
		"comment comment";
}

body > div {
	padding: 30px;
}

body > div:first-child {
	grid-area: "left";
}

body > div:nth-child(2) {
	grid-area: "right";
}

body > div.comment {
	grid-area: comment;
	text-align: center;
	background-color: darkgray;
}

td {
	width: 130px;
	height: 130px;

	text-align: center;
	font-size: 50px;
	border: black solid;
}

td span {
	display: block;
	text-align: center;
}

.case {
	position: relative;
	background-color: white;
}

.animation,
.animation::after {
	animation-duration: 4s;
}

.animation.pieceMoteur::after {
	content: "";
	background-image: url("./engrenage.png");
	animation-name: piece-disparait;
	opacity: 0;
	background-size: cover;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: 1;
}

.animation:not(.pieceMoteur) {
	animation-name: couleur-disparait-non;
}

.piece-revelee {
	background-color: darkgray;
	background-image: url("./engrenage.png");
	background-size: cover;
}

li {
	padding-top: 20px;
}

/* La couleur disparait au fur et à mesure */
@keyframes couleur-disparait-non {
	from {
		background-color: red;
	}
	to {
		background-color: white;
	}
}

/* La couleur disparait au fur et à mesure */
@keyframes piece-disparait {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

#bonus-hint {
	position: absolute;
	width: 300px;
	bottom: 0;
	right: 0;
}