@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

#navContent, .splash, .intermediaire, .failure, .final, .gameplay, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: 'Noto Sans SC', Arial Unicode MS,Arial, Tahoma, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
	font-size:18px;
	margin:30px auto 0 auto;
	position:relative;
	overflow:hidden;
}
#navContent ul{margin: 0;padding: 0;list-style: none}
#navContent li {
	height: 40px;
    width: 130px;
    display: block;
    cursor: pointer;
    margin: 2px;
}
#navContent li:hover{
	background: -moz-radial-gradient(center, ellipse cover,  rgba(241,218,54,0.55) 0%, rgba(254,252,234,0.26) 31%, rgba(254,252,234,0) 58%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(241,218,54,0.55) 0%,rgba(254,252,234,0.26) 31%,rgba(254,252,234,0) 58%);
	background: radial-gradient(ellipse at center,  rgba(241,218,54,0.55) 0%,rgba(254,252,234,0.26) 31%,rgba(254,252,234,0) 58%);
	transition: .5s ease;
}
.splash-btn{
	position: absolute;
    top: 70px;
    left: 507px;
}
.SOP-btn{
	height: 55px;
    width: 29%;
    font-family: 'Russo One', sans-serif;
    color: #fff;
    cursor: pointer;
    position: absolute;
    bottom: 4%;
    left: 35%;
    font-size: 41px; 
}
.SOP-btn:hover{
	text-shadow: 0 2px 5px #110901;
	transition: .5s ease;
}
.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;
	position: absolute;
	bottom: 5%;
	cursor: pointer;
	text-align: center;
	border: 3px solid #008ca1;
}
.fa-bulle i{line-height: 44px;}
.fa-bulle:hover{font-size: 24px}
#no-sound{left: 80%}
.fa-ban{display: none}
.splash #viewcheatsheet{left: 70%}
.gameplay #viewlesson{left: 5%; bottom: 12%}
.gameplay #viewcheatsheet{left: 5%; bottom: 78%}

.splash{background:url('img/splash.png');overflow: auto}
.splash > p{position: absolute;bottom: 3%;width: 400px;color: #F9D19f}
.splash-panel{
	display:none;
	color: #747474;
    background-color: #FFF;
    border: 5px solid #dae0e6;
    padding: 12px 20px;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    bottom: 90px;
    width: 470px;
    height: 305px;
    font-size: 18px;
    font-family: 'Russo One', sans-serif;
	-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 b {font-size: 32px; font-variant: small-caps; color: #16a1bf}
.splash-panel span{color: #16a1bf}
.splash-panel em{
    font-size: 16px;
    line-height: 20px;
    width: 36px;
    height: 21px;
    display: inline-block;    
    margin: 2px 15px;
    background-color: rgb(245 215 3 / 55%);
    padding: 4px 3px;
    font-style: normal;
    border: 1px solid #d8a04d;
    color: #e90101;
    border-radius: 4px;
}

.intermediaire{
	background:url('img/intermediaire.png');
	overflow: auto;
}
#hint {display: none; position: absolute;top: 19%; left: 53%;font-size: 28px;text-shadow: 0px 0px 6px white}
.intermediaire p{
	font-size: 20px;
    color: white;
    position: absolute;
    top: 19%;
    left: 53%;
    width: 40%;
    text-align: left;
}
#training-title{
	display: block;
	font-family: 'Russo One', sans-serif;
    color: #fff;
    position: absolute;
    top: 12%;
    left: 62%;
    font-size: 30px;
}
#training-timer-container{
	width: 176px;
 	height:24px;
	display:block;
	background-color:#fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position: absolute;
	top: 5%;
	left: 59.5%;
}
#training-timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	background: #b7deed;
	background: -moz-linear-gradient(top, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	background: -webkit-linear-gradient(top, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	background: linear-gradient(to bottom, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}
.intermediaire > div {position: absolute; width: 40%; height: 19%; left: 6%; top: 29%; cursor: pointer; color: black; font-size: 36px; line-height: 75px}
.intermediaire div:nth-of-type(2) {top: 50%}
.intermediaire div:nth-of-type(3) {top: 71%}
.intermediaire div img {vertical-align: middle; margin: -5px 15px}

.gameplay{background: url('img/gameplay.png')}
.gameplay img {
	position: absolute;
    left: 13%;
    top: 8%;
    border: 2px solid #919191
}
#timer{
	width:0px;
	height:12px;
	display:block;
	background: #b7deed;
	background: -moz-linear-gradient(top, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	background: -webkit-linear-gradient(top, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	background: linear-gradient(to bottom, #edd3b7 0%,#f39b47 50%,#f8501e 51%,#edcfb7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
	position: absolute;
    top: 24px;
    left: 90px;
}

#handler {
	position: absolute;
    width: 160px;
    left: 73%;
    top: 11%;
    height: 115px;
    color: #fff;
    text-align: left;
 }
 #handler b{font-size:22px; color: #d2f9ff}
 .instruction {font-size: 16px; color: #d2f9ff}
 #sms {
 	font-family: 'Russo One', sans-serif;
	position: absolute;
    width: 160px;
    left: 73%;
    top: 43%;
    color: #41aad6;
 }
 #yes, #no, #A, #B, #C, #D, #E, #F, #eraser, #send {cursor: pointer}
 #yes {
 	font-family: 'Russo One', sans-serif;
 	position: absolute;
    left: 521px;
    top: 247px;
 }
 #yes:hover, #no:hover {color: #f8501e}
#no{
	font-family: 'Russo One', sans-serif;
 	position: absolute;
    left: 618px;
    top: 247px;
}
#A, #B, #C, #D, #E, #F {position: absolute; font-size: 24px; color: #264b6c; width: 40px}

#A {top: 289px; right: 138px}
#B {top: 289px; right: 85px}
#C {top: 289px; right: 33px}
#D {top: 339px; right: 138px}
#E {top: 339px; right: 85px}
#F {top: 339px; right: 33px}

#A:hover {font-size: 25px}
#send{
	position: absolute;
    top: 244px;
    right: 94px;
    width: 25px;
    height: 25px;
    color: #fff;
    text-shadow: -2px 1px 0 #000000;
    font-size: 15px;
}
#eraser{
	position: absolute;
    top: 207px;
    right: 20px;
    width: 30px;
    height: 30px;
    color: #41aad6;
    font-size: 15px;
    z-index: 5;
}
.fa-send:before{content:"\f1d8"}
.fa-eraser:before{content:"\f12d"}

 #score {
 	font-family: 'Russo One', sans-serif;
    position: absolute;
    color: #fff;
    top: 9%;
    left: 76%;
 }
 .hearts{
 	width: 65px;
    height: 22px;
    background-color: #b3ecff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    color: #f91fb7;
    font-size: 14px;
    left: 606px; 
    top: 35px;}

.failure{
	background:url('img/gameplay.png');
	overflow: auto;
}
#gameover{
	width: 374px;
	height: 336px;
	background-color: #000;
	color: #fff;
	position: absolute;
    left: 13%;
    top: 8%;
    border: 2px solid #919191
}
#gameover span{color: #41aad6; font-family: 'Russo One', sans-serif; font-size: 50px; margin-top: 55px; display: block}
#replay {padding: 12px;background-color: #c6208f;font-size: 22px;color: #fbdc7d; cursor: pointer}