@charset "utf-8";
@import url('https://fonts.bunny.net/css?family=Titan+One&display=swap');
#navContent, .splash, .intermediaire, .gameplay, .failure,.final, .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;
	margin:30px auto 0 auto;
	position:relative;
	overflow:hidden;
	line-height: 25px;
}

.splash{background:url('img/splash.png')}
.splash > p{position: absolute; font-family: "Titan One", cursive;font-size:22px;
    bottom: 16%;
    left: 22%;
    color: #9a5a0b}

.splash-btn {
	cursor:pointer;
	width:92px;
	height:38px;
	display:block;
	position: absolute;
	bottom:10px;
}
.splash-btn:hover {
	-webkit-box-shadow: inset 0px -30px 25px -25px #fd9700ad;
	-moz-box-shadow: inset 0px -30px 25px -25px #fd9700ad;
	box-shadow: inset 0px -30px 25px -25px #fd9700ad;	
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border: 0px solid #000000;
}
#howtoplay {left: 173px}
#didyouknow{left: 540px}
#cheatsheet-btn{left: 435px; bottom: 8px}
#start {width:137px; height:59px; left: 286px}
.splash-panel{
	display:none;
	background-color: #FFF;
	border: 6px solid #b6277a;
	padding:20px;
	-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);
	position: absolute;
	left: 149px;
    bottom: 90px;
    width: 436px;
    height: 241px;
}
.splash-panel span{font-family: "Titan One", cursive;font-size:22px; color:#b6277a}
.splash-panel p{text-align: left}
.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;
}

.gameplay{background:url('img/gameplay.png');font-size:22px; color:#cc3399}
#gameplay-words{top: 14px;left: 230px;width: 95px; height: 40px}
#gameplay-learn{width:146px;height:32px; bottom: 12px; left: 223px}
.hint {font-size:14px; width:118px;position: absolute;	top: 100px;right: 0; height: 78px; border: 2px dashed #dc54a3;border-radius: 10px;padding: 2px 5px}
.hint em{font-family: "Titan One", cursive; font-size: 18px}
.fa-heart:before {padding: 0 3px}
.pix span{display: block;position: absolute; font-size: 35px; color: #fff; text-shadow: 1px 2px #935400}
.pix span:hover{cursor:pointer; text-shadow: 2px 2px 5px #fff}
.pix span:nth-child(1){top: 138px; left: 51px}
.pix span:nth-child(2){top: 238px; left: 38px}
.pix span:nth-child(3){top: 330px; left: 80px}
.pix span:nth-child(4){top: 96px; right: 187px}
.pix span:nth-child(5){top: 196px; right: 156px}
.pix span:nth-child(6){top: 292px; right: 166px}
.questionText img{position: absolute;top:95px;left:192px}
#message{width:160px;height: 35px; border-radius:15px;position: absolute;top: 275px; left: 200px;background-color: #fff; text-align: left; padding: 3px 10px;line-height: 32px;font-size: 26px}
#send, #delete {position: absolute; top: 275px; cursor: pointer; width: 24px;height: 35px;border-radius: 25px; background-color: #71ceef;color: #ffffff;text-align: left;padding: 3px 10px;line-height: 32px;font-size: 20px}
#send:hover, #delete:hover{background-color:#a3e262}
.fa-send:before{content:"\f1d8"}
.fa-eraser:before{content:"\f12d"}
#send{left: 385px}
#delete {left: 150px}

.good-feedback, .bad-feedback {
	position:absolute;
	width: 250px;
	height:50px;
	top: 145px;
	left:163px;
	color: #fff;
	display: none;
}
.reply{cursor: pointer;width: 140px;height: 35px;border-radius: 25px;position: absolute;top: 137px;left: 48px;background-color: #fff;color: #d8a04d;padding: 3px 10px;line-height: 32px}
.reply img{width: 32px; vertical-align: bottom}
.fa-thumbs-up:before{content:"\f164"}

.progression{
 	height:24px;
	display:block;
	background-color:#dc54a3;
	border-radius: 10px;
	position: absolute;
	color:#fff;
	font-size: 14px;
 }
 .timer-container, .score, .hearts{right: 0}
 .timer-container{top: 0; width: 176px}
 .score{top: 32px; width: 156px; font-family: "Titan One", cursive}
 .hearts {top: 64px; width: 125px}
 .timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	background: #b7deed;
	background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
	background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}

.failure {background:url('img/failure.png') no-repeat}
#failure-replay{width:140px; height:55px; right: 83px; bottom: 22px}
#failure-cheat {right: 235px; bottom: 15px}