/* GLOBAL */

body {-webkit-text-size-adjust: 100%;}

body {
	background: #fff;
	margin: 4% 0;
	padding: 0;
	font-size: 100%;
	font-family: "Inter",sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
}

div, span, p, img, object {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

a, a:hover {
	color: #000;
	text-decoration: none;
	outline: none;
}

/* STRUCTURE */

#wrapper {width: 90%; margin: 0 auto; padding: 0;}

/* CHOIX DES JEUX */

#choixjeu {display: block; width: 100%; text-align: center; margin: 0 auto;}
#choixjeu a {
	display: inline-block;
	margin-bottom: 18px;
	padding-top: 24px;
	padding-right: 28px;
	padding-bottom: 24px;
	color: #fff;
	text-align: center;
	font-size: 1.8em;
	letter-spacing: 1px;
	font-weight: 500;
}

#choixjeumots {background: steelblue url(../img/mots.png) 28px center no-repeat; background-size: 32px; padding-left: 80px;}
#choixjeumemory {background: steelblue url(../img/memory.png) 28px center no-repeat; background-size: 34px; padding-left: 82px;}
#choixjeuquiz {background: steelblue url(../img/quiz.png) 28px center no-repeat; background-size: 22px; padding-left: 70px;}

/* CARTES */

.carte-bloc {
  display: block;
  text-align: center; 
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  height: 380px;
  perspective: 600px;
}

.carte {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.carte.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.carte-face {
  position: absolute;
  width: 92%;
  height: 100%;
  color: white;
  text-align: center;
  padding: 0 4%;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  backface-visibility: hidden;
}

.carte-face-quiz {
  position: absolute;
  width: 92%;
  height: 100%;
  display: grid;
  align-items: center;
  color: white;
  text-align: center;
  padding: 0 4%;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  backface-visibility: hidden;
}

.carte-face-front {
  background: darkseagreen;
}

.carte-face-front .explication {padding: 4% 0; font-size: 24px; letter-spacing: 1px;}
.carte-face-front .mot {display: inline-block; width: 43%; margin: 2%; padding: 5% 0; vertical-align: top; background-color: #fff; color: darkseagreen;}
.carte-face-front .quiz {font-size: 34px; letter-spacing: 1px;}
.carte-face-front .quiz .trait {letter-spacing: 0 !important;}

.carte-face-back {
  background: rosybrown;
  transform: rotateY(180deg);
}

.carte-face-back .explication {padding: 4% 0; font-size: 24px; letter-spacing: 1px;}
.carte-face-back .mot {display: inline-block; width: 43%; margin: 2%; padding: 5% 0; vertical-align: top; background-color: #fff; color: rosybrown;}
.carte-face-back .quiz {font-size: 34px; letter-spacing: 1px;}
.carte-face-back .quiz .trait {letter-spacing: 0 !important;}

/* BOUTONS */

.bouton {
	display: block;
	width: 100%;
	text-align: center;
	margin: 60px auto 60px auto;
}

#nouvellecarte,
#retourchoix {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 1.4em;
	letter-spacing: 1px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

#nouvellecarte {background: whitesmoke url(../img/nouvellecarte.png) 20px center no-repeat; background-size: 24px; padding-left: 58px;}
#retourchoix {background: whitesmoke url(../img/menu.png) 20px center no-repeat; background-size: 24px; padding-left: 58px;}

/* MEDIA QUERIES */

@media only screen and (max-width: 767px) {
	.carte-face-front .mot,
	.carte-face-back .mot {
		font-size: 24px !important;
		display: block !important;
		width: auto !important;
		padding: 2% 0 !important;
		margin: 3% 2% !important;
	}
	
	.carte-face-front .explication,
	.carte-face-back .explication {font-size: 20px !important;}
	
	.carte-face-front .quiz,
	.carte-face-back .quiz {font-size: 28px !important;}
}