body {
	margin: 0;
	padding: 0;

	height: 100vh;
	background: linear-gradient(
		141deg,
		rgba(232, 232, 227, 1) 9%,
		rgba(224, 212, 212, 0.9781162464985994) 28%,
		rgba(255, 255, 255, 0.9781162464985994) 49%,
		rgba(255, 252, 244, 1) 65%,
		rgba(251, 241, 206, 1) 83%
	);
	background-size: cover;
	background-repeat: no-repeat;
	font-family: radikal;
	color: #fff;
}

/*** VALEURS TESTS ***/
.btest1 {
	border: 1px solid violet;
}
.bgtest1 {
	background-color: #ff0000;
}

/*** AFFICHAGE ET DECORATION GLOBALE ***/
h1 {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	animation: rainbow 4s linear infinite;
	text-decoration: underline;
	font-size: 20pt;
}
@keyframes rainbow {
	0% {
		color: #ff0000;
	}
	16.666% {
		color: #ffa500;
	}
	33.333% {
		color: #ffff00;
	}
	50% {
		color: #008000;
	}
	66.666% {
		color: #0000ff;
	}
	83.333% {
		color: #800080;
	}
	100% {
		color: #ff0000;
	}
}
.column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

button {
	width: 60%;
	border-radius: 25px;
	border-radius: 1px solid gray;
	box-shadow: 4px 4px 11px 4px gainsboro;
	background-color: #591b83;
	color: rgba(224, 212, 212, 0.9781162464985994);
	transition: transform 150ms, box-shadow 150ms;
	margin-bottom: 1rem;
}
button:active {
	transform: scale(0.95);
	box-shadow: 0px 0px 0px gainsboro;
}

#scoreDisplay {
	color: black;
	margin-bottom: -0.5rem;
}
.textShadow {
	color: black;
}
/*** AFFICHAGE ET DECORATION GLOBALE________ FIN ***/
/***************************************************/

/*** LETTERS CONTAINER AND DECORATION ***/
.organize-container1 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.organize-container2 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.organize-container3 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.organize-container4 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.center {
	justify-content: center;
	align-items: center;
}
.container {
	height: 30%;
	width: 15%;
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	font-size: 30pt;
}
.container:hover {
	cursor: pointer;
}

.bouncing {
	animation: bounce 1.5s ease-in-out infinite;
}
@keyframes bounce {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}

.music {
	color: black;
}
.keyPressing {
	transform: scale(0.85);
}

/*** LETTERS ANIMATION ***/

/**************************************************************FIRST LINE  *****/
.a {
	background-image: url(./img/alphabet/arbre.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e65353, -6px -6px 8px 3px #f01616;
	border: 2px solid #e65353;
	transition: box-shadow 250ms, transform 250ms;
}
.a:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e65353, 0px 0px 15px 3px #f01616;
}
.b {
	background-image: url(./img/alphabet/ballon.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e9822e, -6px -6px 8px 3px #e65353;
	border: 2px solid #e9822e;
	transition: box-shadow 250ms, transform 250ms;
}
.b:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e9822e, 0px 0px 15px 3px #e65353;
}

.c {
	background-image: url(./img/alphabet/crayons.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e9ae2e, -6px -6px 8px 3px #e9822e;
	border: 2px solid #e9ae2e;
	transition: box-shadow 250ms, transform 250ms;
}
.c:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e9ae2e, 0px 0px 15px 3px #e9822e;
}

.d {
	background-image: url(./img/alphabet/dodo.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(252, 202, 3), -6px -6px 8px 3px #e9ae2e;
	border: 2px solid rgb(252, 202, 3);
	transition: box-shadow 250ms, transform 250ms;
}
.d:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(252, 202, 3), 0px 0px 15px 3px #e9ae2e;
}
.e {
	background-image: url(./img/alphabet/elephant.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(107, 248, 46),
		-6px -6px 8px 3px rgb(252, 202, 3);
	border: 2px solid rgb(107, 248, 46);
	transition: box-shadow 250ms, transform 250ms;
}
.e:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(107, 248, 46),
		0px 0px 15px 3px rgb(252, 202, 3);
}

.f {
	background-image: url(./img/alphabet/flamant.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(15, 236, 137),
		-6px -6px 8px 3px rgb(107, 248, 46);
	border: 2px solid rgb(15, 236, 137);
	transition: box-shadow 250ms, transform 250ms;
}
.f:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(15, 236, 137),
		0px 0px 15px 3px rgb(107, 248, 46);
}

.g {
	background-image: url(./img/alphabet/grue.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 201, 222),
		-6px -6px 8px 3px rgb(15, 236, 137);
	border: 2px solid rgb(45, 201, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.g:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 201, 222),
		0px 0px 15px 3px rgb(15, 236, 137);
}

.h {
	background-image: url(./img/alphabet/herisson.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 125, 222),
		-6px -6px 8px 3px rgb(45, 201, 222);
	border: 2px solid rgb(45, 125, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.h:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 125, 222),
		0px 0px 15px 3px rgb(45, 201, 222);
}

/*************************************************************SECOND LINE  *****/

.i {
	background-image: url(./img/alphabet/igloo.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e9822e, -6px -6px 8px 3px #e65353;
	border: 2px solid #e9822e;
	transition: box-shadow 250ms, transform 250ms;
}
.i:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e9822e, 0px 0px 15px 3px #e65353;
}
.j {
	background-image: url(./img/alphabet/jumelle.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e9ae2e, -6px -6px 8px 3px #e9822e;
	border: 2px solid #e9ae2e;
	transition: box-shadow 250ms, transform 250ms;
}
.j:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e9ae2e, 0px 0px 15px 3px #e9822e;
}

.k {
	background-image: url(./img/alphabet/koala.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(252, 202, 3), -6px -6px 8px 3px #e9ae2e;
	border: 2px solid rgb(252, 202, 3);
	transition: box-shadow 250ms, transform 250ms;
}
.k:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(252, 202, 3), 0px 0px 15px 3px #e9ae2e;
}

.l {
	background-image: url(./img/alphabet/lapin.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(107, 248, 46),
		-6px -6px 8px 3px rgb(252, 202, 3);
	border: 2px solid rgb(107, 248, 46);
	transition: box-shadow 250ms, transform 250ms;
}
.l:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(107, 248, 46),
		0px 0px 15px 3px rgb(252, 202, 3);
}
.m {
	background-image: url(./img/alphabet/mouton.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(15, 236, 137),
		-6px -6px 8px 3px rgb(107, 248, 46);
	border: 2px solid rgb(15, 236, 137);
	transition: box-shadow 250ms, transform 250ms;
}
.m:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(15, 236, 137),
		0px 0px 15px 3px rgb(107, 248, 46);
}

.n {
	background-image: url(./img/alphabet/nuage.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 201, 222),
		-6px -6px 8px 3px rgb(15, 236, 137);
	border: 2px solid rgb(45, 201, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.n:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 201, 222),
		0px 0px 15px 3px rgb(15, 236, 137);
}

.o {
	background-image: url(./img/alphabet/orange.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 125, 222),
		-6px -6px 8px 3px rgb(45, 201, 222);
	border: 2px solid rgb(45, 125, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.o:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 125, 222),
		0px 0px 15px 3px rgb(45, 201, 222);
}

.p {
	background-image: url(./img/alphabet/pingouin.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #a73fed, -6px -6px 8px 3px rgb(45, 125, 222);
	border: 2px solid #a73fed;
	transition: box-shadow 250ms, transform 250ms;
}
.p:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #a73fed, 0px 0px 15px 3px rgb(45, 201, 222);
}

/**************************************************************THIRD LINE  *****/
.q {
	background-image: url(./img/alphabet/quiche.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #e9ae2e, -6px -6px 8px 3px #e9822e;
	border: 2px solid #e9ae2e;
	transition: box-shadow 250ms, transform 250ms;
}
.q:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #e9ae2e, 0px 0px 15px 3px #e9822e;
}
.r {
	background-image: url(./img/alphabet/renard.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(252, 202, 3), -6px -6px 8px 3px #e9ae2e;
	border: 2px solid rgb(252, 202, 3);
	transition: box-shadow 250ms, transform 250ms;
}
.r:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(252, 202, 3), 0px 0px 15px 3px #e9ae2e;
}

.s {
	background-image: url(./img/alphabet/souris.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(107, 248, 46),
		-6px -6px 8px 3px rgb(252, 202, 3);
	border: 2px solid rgb(107, 248, 46);
	transition: box-shadow 250ms, transform 250ms;
}
.s:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(107, 248, 46),
		0px 0px 15px 3px rgb(252, 202, 3);
}

.t {
	background-image: url(./img/alphabet/train.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(15, 236, 137),
		-6px -6px 8px 3px rgb(107, 248, 46);
	border: 2px solid rgb(15, 236, 137);
	transition: box-shadow 250ms, transform 250ms;
}
.t:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(15, 236, 137),
		0px 0px 15px 3px rgb(107, 248, 46);
}
.u {
	background-image: url(./img/alphabet/ukulele.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 201, 222),
		-6px -6px 8px 3px rgb(15, 236, 137);
	border: 2px solid rgb(45, 201, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.u:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 201, 222),
		0px 0px 15px 3px rgb(15, 236, 137);
}

.v {
	background-image: url(./img/alphabet/voiture.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 125, 222),
		-6px -6px 8px 3px rgb(45, 201, 222);
	border: 2px solid rgb(45, 125, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.v:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 125, 222),
		0px 0px 15px 3px rgb(45, 201, 222);
}

.w {
	background-image: url(./img/alphabet/wagon.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #a73fed, -6px -6px 8px 3px rgb(45, 125, 222);
	border: 2px solid #a73fed;
	transition: box-shadow 250ms, transform 250ms;
}
.w:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #a73fed;
}

.x {
	background-image: url(./img/alphabet/xylophone.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px #591b83, -6px -6px 8px 3px #a73fed;
	border: 2px solid #591b83;
	transition: box-shadow 250ms, transform 250ms;
}
.x:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px #591b83;
}
/*************************************************************FOURTH LINE  *****/
.y {
	background-image: url(./img/alphabet/yaourt.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 201, 222),
		-6px -6px 8px 3px rgb(15, 236, 137);
	border: 2px solid rgb(45, 201, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.y:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 201, 222),
		0px 0px 15px 3px rgb(15, 236, 137);
}

.z {
	background-image: url(./img/alphabet/zebre.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	padding-left: 0.5rem;
	box-shadow: 6px 6px 8px 3px rgb(45, 125, 222),
		-6px -6px 8px 3px rgb(45, 201, 222);
	border: 2px solid rgb(45, 125, 222);
	transition: box-shadow 250ms, transform 250ms;
}
.z:active {
	transform: scale(0.85);
	box-shadow: 0px 0px 15px 3px rgb(45, 125, 222),
		0px 0px 15px 3px rgb(45, 201, 222);
}

/***********************************************************MEDIA QUERIES*****/
@media only screen and (max-width: 600px) {
	.container {
		flex-basis: calc(36% - 20px);
		margin-top: 1.5rem;
	}
}