@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&family=Noto+Serif+TC:wght@600&display=swap');
@-webkit-keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
#navContent, .splash, .intermediaire, .final, .gameplay, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	position:relative;
	overflow:hidden;
	margin:30px auto 0 auto;
	line-height: 25px;
}
.fa-bulle{
	width: 45px;
	height: 45px;
	background: rgb(234,48,113);
	background: -moz-linear-gradient(top,  rgba(234,48,113,1) 0%, rgba(251,234,33,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	background: linear-gradient(to bottom,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3071', endColorstr='#fbea21',GradientType=0 );
	border-radius: 28px;
	font-size: 26px;
	color: white;
	-webkit-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	-moz-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	position: absolute;
	top: 6%;
	cursor: pointer;
	text-align: center;
}
.fa-bulle i{line-height: 46px;}
.fa-bulle:hover{font-size: 24px}
#howtoplay{left: 3%}
#didyouknow{left: 13%}

.next-level {
	-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	box-shadow:inset 0px 1px 0px 0px #fbafe3;
	background:-moz-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-webkit-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-o-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-ms-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d',GradientType=0);
	background-color:#ff5bb0;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	border:1px solid #ee1eb5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:28px;
	padding:20px 50px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
	transition: .5s ease;
	margin-top: 42%;
}
.next-level:hover {
	background:-moz-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-webkit-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-o-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-ms-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0',GradientType=0);
	background-color:#ef027d;
}

.splash{background:url('img/splash.jpg');overflow: auto}
.splash > p{position: absolute;top: 28%;width: 400px;color: #cdce68;left: 25%; font-size: 23px}
.splash-panel{
	display:none;
	color: #747474;
    background-color: #FFF;
    border: 5px solid #dae0e6;
    padding: 15px 40px;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    bottom: 3%;
    width: 630px;
    height: 326px;
    font-size: 16px;
	-webkit-box-shadow: 10px 40px 0px 100px #f8710fc9;
	-moz-box-shadow: 10px 40px 0px 100px #f8710fc9;
	box-shadow: 10px 40px 0px 100px #f8710fc9;
	-webkit-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
}
.splash-panel p{text-align: left}
.splash-panel b {font-size: 25px; color: black}
.splash-panel span{color: #bf9a35}
.splash-panel em{
    font-size: 16px;
    line-height: 20px;
    width: 36px;
    height: 21px;
    display: inline-block;    
    margin: 0 15px;
    background-color: #ffeeee;
    padding: 1px 5px;
    font-style: normal;
    border: 1px solid #ebe6b7;
    color: #c4347b;
    border-radius: 4px;
}
#lesson {background: url('img/lesson.png'); display: none;}
.gameplay{background: url('img/level1.jpg')}
.gameplay-info{
	background: rgb(234,48,113);
	background: -moz-linear-gradient(top,  rgba(234,48,113,1) 0%, rgba(251,234,33,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	background: linear-gradient(to bottom,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3071', endColorstr='#fbea21',GradientType=0 );
    width: 140px;
    color: floralwhite;
    height: 27px;
    line-height: 28px;
    border-radius: 6px;
    position: absolute;
    top: 2%;
    -webkit-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	-moz-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
}
#info-level {right: 1%}
#info-score {left: 1%}
#start {font-size: 25px; top: 70%; left: 42%; line-height: 40px; height: 45px; cursor: pointer}
#cardSlots{
	position: absolute;
	left: 1.2%;
    top: 7%;
	width: 108px;
 }
.placemat{
 	font-family: 'Noto Serif TC', serif;
    height: 43px;
    line-height: 40px;
    color: #201a1a;
    position: absolute;
    width: 112px;
 }
.mot-hover{
 	-webkit-box-shadow: inset 0px 0px 15px 0px rgb(0 144 153);
	-moz-box-shadow: inset 0px 0px 15px 0px rgb(0 144 153);
	box-shadow: inset 0px 0px 13px 0px rgb(0 144 153);
 }

#tag1, #tag2, #tag0 {top: 105px}
#tag3, #tag4, #tag5 {top: 321px}

#tag0, #tag3 {left: 79px}
#tag1, #tag4 {left: 282px}
#tag2, #tag5 {left: 486px}

#drag1, #drag2, #drag3, #drag4, #drag5 {top: 186px}
#drag6, #drag7, #drag8, #drag9, #drag0 {top: 221px}

#drag1 {left: 34px; rotate: 10deg;}
#drag6 {left: 84px; rotate: -13deg}
#drag2 {left: 162px; rotate: 2deg}
#drag7 {left: 199px; rotate: 3deg}
#drag3 {left: 284px; rotate: 5deg}
#drag8 {left: 320px; rotate: 15deg}
#drag4 {left: 402px; rotate: -11deg}
#drag9 {left: 432px; rotate: 18deg}
#drag5 {left: 544px; rotate: 5deg}
#drag0 {left: 540px; rotate: -9deg}

[id*='drag']{
    cursor: move;
    height: 44px;
    width: 112px;
    color: #000;
    font-size: 21px;
    line-height: 42px;
    background-color: #fff;
    position: absolute;
    box-shadow: 5px 5px 5px #000;
}
#exit{
	cursor: pointer;
    display: none;
    color: white;
    text-shadow: 0px 0px 20px #000;
    font-weight: bold;
    font-size: 30px;
}
.intermediaire, .final {
	background:url('img/intermediaire.jpg');
	overflow: auto;
}
.intermediaire p{
	font-size: 24px; 
	color: white;
	position: absolute;
	top: 20%;
	left: 17%;
	width: 450px;
}
.intermediaire p span{
	font-family: 'Noto Serif', serif;
	color: #efc266;
}