* {
	box-sizing: border-box;
}

body {
	padding: 10vh 0;
	overflow: auto;
	background-color: black;
	filter: drop-shadow(0 0 10px white);
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	color: white;
	font-size: 1.5rem;
	&.cell {
		background-image: url("../data/images/sapin.png");
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: right bottom;
	}
}
h1, h2, h3, h4 {
	text-align: center;
}

h1 {
  color: red;
}
h2 {
  color: green;
}

a {
	text-decoration: none;
	color: green;
}

#solution-zone {
	border: 2px solid green;
	color: green;
	font-size: 2rem;
	height: 3rem;
}

.sample-symbol {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	margin: 0.7rem;
	font-size: 2.8rem;
	text-align: center;
	& img {
		width: 2.8rem;
	}
}
.scroll-images {
	display: inline-block;
	/*width: 3em;*/
}

/*
Memory
*/
#memory {
	display: grid;
	column-gap: 1rem;
	row-gap: 1.5rem;
}
.easy {
		grid-template-columns: repeat(4, 1fr);
		--card-width: 15vw;
	}
	.medium {
		grid-template-columns: repeat(6, 1fr);
		--card-width: 10vw;
	}
	.hard {
		grid-template-columns: repeat(8, 1fr);
		--card-width: 7vw;
	}

[class^=memory-card] {
	width: clamp(2rem, var(--card-width), 5rem);
}