@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&family=Ma+Shan+Zheng&family=Noto+Serif+TC:wght@600&family=ZCOOL+KuaiLe&family=Zhi+Mang+Xing&display=swap');
.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}
.infinite {
  animation-iteration-count: infinite;
}
@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}
.flash{animation-name:flash}
@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}
.fadeIn{animation-name: fadeIn;}
@keyframes shake {from, to {transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90% {transform: translate3d(-1px, 0, 0);}20%, 40%, 60%, 80% {transform: translate3d(1px, 0, 0);}}
.shake {animation-name: shake;}
#navContent, .splash, .intermediaire, .failure, .final, .gameplay, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	margin:50px auto;
	position:relative;
	overflow:hidden;
}
#no-sound{position: absolute;top: 3%; right: 14px; cursor: pointer;}
.fa-bulle{
	width: 43px;
	height: 43px;
	background: #676e98;
  border: 3px solid #ccc;
	border-radius: 28px;
	font-size: 26px;
	color: white;
}
.fa-bulle i{line-height: 43px;}
.fa-bulle:hover{font-size: 24px}
.fa-ban{color: red; display: none}
.splash{background:url('img/splash.jpg');overflow: auto}
.splash > p{
	position: absolute;
  bottom: 12%;
  left: 5%;
  width: 255px;
  color: #576979;
  line-height: 27px;
  text-align: left;
	text-shadow: 2px 2px 3px #fff;

}

.splash-btn{
	width: 480px;
	position: absolute;
	bottom: 4%;
	left: 28%;
}
#navContent ul > a, #navContent ul > a :hover{
	font-weight: normal;
	color: #fff;
}
#navContent ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
#navContent li {
	height:40px;
	width:130px;
	display: block;
	cursor:pointer;
	float: left;
	margin: 12px;
	color: #fff;
	line-height: 39px;
	text-shadow: 0 1px 0 #000;
	background-color: #676e98;
  border: 3px solid #ccc;
	cursor:pointer;
}
#navContent li:hover{
	box-shadow: 0 0 5px #ebe6b7 inset, 0 0 5px #bf9a35 inset;
	transition: .5s ease;
}
.TP1-btn{
	height:60px;
	width:200px;
	background: #f0e8d8;
	border: 5px solid #f0eedc;
	line-height: 55px;
	font-size: 38px;
	font-variant: small-caps;
	background-image: linear-gradient(to bottom, #dacdb1 11%, #f0e8d8 56%);
	box-shadow: 0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;
	cursor:pointer;
	position: absolute;
	bottom: 22%;
	left: 51%; 
}
.TP1-btn:hover{	
	box-shadow: 0 0 5px #cdbe9f inset, 0 0 10px #beae8c inset;
	transition: .5s ease;
}
.splash-panel{
	display:none;
	color: #747474;
    background-color: #FFF;
    border: 5px solid #dae0e6;
    padding: 6px 40px;
    box-sizing: border-box;
    box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
    position: absolute;
    left: 20px;
    bottom: 80px;
    width: 630px;
    height: 305px;
    font-size: 18px;
}
.splash-panel b {font-size: 32px; font-variant: small-caps; color: black}
.splash-panel span{font-size: 16px; color: #bf9a35; width:50px;}
.splash-panel em{
	background-color: #ffeeee;
  padding: 0px 2px;
  font-style: normal;
  font-size: 16px;
  border: 1px solid #aa9999;
  color: #a54071;
  width: 36px;
  display: inline-block;
  line-height: 20px;
  height: 21px;
  margin: 0 15px;
}

.gameplay{
	background: url('img/gameplay.jpg');
	overflow: auto;  
 } 
#view-lesson{position: absolute; bottom: 5%; left: 25%}
#play-games{position: absolute; bottom: 5%; right: 28%}

.timer-container{
 	width: 176px;
 	height:24px;
	display:block;
	background-color:#3c280c;
	border-radius:2px;
	position: absolute;
	bottom: 18px; 
	left: 251px;
	color:#fff;
	border: 2px solid rgba(0, 0, 0, 0.1);
	font-weight: bold;
	font-size: 14px;
	line-height: 25px;
 }
 .score{position: absolute; width: 250px; bottom: 52px; left: 31%}
 .timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	background: #bfd255;
	background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
	border-radius: 4px 0 0 4px;
}
.timer-level{
	position: absolute;
	z-index: 10;
	left: 0;
	width: 176px;
	font-size: 14px;
}
#cardSlots{
	position: absolute;
	left: 1.2%;
  top: 7%;
	width: 108px;
 }
.placemat{
 	font-family: 'Noto Serif TC', serif;
  height: 63px;
  margin-bottom: 9px;
  line-height: 57px;
  color: #fff;
 }
.mot-hover{
	box-shadow: inset 0px 0px 13px 0px rgb(0 144 153);
 }
.add-paper1{ 	
 	background: linear-gradient(to bottom, rgba(0,0,0,0) 86%, rgba(255,255,255,0.33) 108%);
}
.add-paper2{ 	
 	background: linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(255,255,255,0.33) 90%, rgba(0,0,0,0) 86%, rgba(255,255,255,0.33) 108%);
}
.add-paper3{ 	
 	background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(255,255,255,0.33) 84%, rgba(0,0,0,0) 80%, rgba(255,255,255,0.33) 90%, rgba(0,0,0,0) 86%, rgba(255,255,255,0.33) 108%);
}
.add-paper4{ 	
 	background: linear-gradient(to bottom, rgba(0,0,0,0) 68%, rgba(255,255,255,0.33) 78%, rgba(0,0,0,0) 70%, rgba(255,255,255,0.33) 84%, rgba(0,0,0,0) 80%, rgba(255,255,255,0.33) 90%, rgba(0,0,0,0) 86%, rgba(255,255,255,0.33) 108%);
}
[id*='drag']{
 	cursor:move;
	height: 76px;
	width: 76px;
	color: #000;
	font-size: 48px;
	margin-right: 3px;
  line-height: 65px;
  background-color: #ffffffa6;
 	position: absolute;
 	box-shadow: 5px 5px 5px #000;
 }
#drag1, #drag2, #drag3, #drag4, #drag5 {top: 12px}
#drag6, #drag7, #drag8, #drag9, #drag10 {top: 91px}
#drag11, #drag12, #drag13, #drag14, #drag15 {top: 170px}
#drag16, #drag17, #drag18, #drag19, #drag0 {top: 249px}

#drag1, #drag6, #drag11, #drag16 {left: 144px}
#drag2, #drag7, #drag12, #drag17 {left: 223px}
#drag3, #drag8, #drag13, #drag18 {left: 302px}
#drag4, #drag9, #drag14, #drag19 {left: 381px}
#drag5, #drag10, #drag15, #drag0 {left: 460px}

#drag1, #drag5, #drag9, #drag13, #drag17 {font-family: 'Noto Serif TC', serif}
#drag2, #drag6, #drag10, #drag14, #drag18 {font-family: 'Ma Shan Zheng', cursive}
#drag3, #drag7, #drag11, #drag15, #drag19{font-family: 'ZCOOL KuaiLe', cursive}
#drag4, #drag8, #drag12, #drag16, #drag0{font-family: 'Zhi Mang Xing', cursive}

.pinyin-mode{display: none; background-color: rgba(213, 25,26,0.5)}

[id*='switch']{position: absolute;top: 52%; right: 3.5%; cursor: pointer}
[id*='switch']:hover{color:#c93}
#switch2{top: 79%; right: 5%;color: #c93}
#exit{
	cursor: pointer;
  display: none;
  color: white;
  text-shadow: 0px 0px 20px #000;
  font-weight: bold;
  font-size: 30px;
}

.failure{
	background:url('img/failure.jpg');
	overflow: auto;
	color: #fff;
}
.failure p{
	font-family: 'Ma Shan Zheng', cursive;
	width: 550px;
	font-size: 44px;
  line-height: 74px;
  padding-top: 160px;
  color: #fff;
  margin: 0 auto;
}
.failure-btn{
	width: 480px;
	position: absolute;
	bottom: 17%;
	left: 14%;
}
.intermediaire{
	background:url('img/intermediaire.jpg');
	overflow: auto;
}
.intermediaire p{
	font-size: 28px;
  font-family: 'Ma Shan Zheng', cursive;
  width: 300px;
  position: absolute;
  top: 15%;
  margin: 0;
  left: 50%;
  line-height: 39px;
}
.intermediaire i{opacity: 0.6}
.intermediaire em{font-family: 'Noto Sans SC', sans-serif; font-style: normal; font-size: 24px; padding:0 22px;}
[id*='drum']{width: 75px; height: 75px; border-radius: 35px; cursor: pointer;position: absolute}
#drum1{bottom: 6%; left: 8%}
#drum2{bottom: 12%; left: 22%}
#drum3{bottom: 13%; left: 36.4%}
#drum4{bottom: 13%; left: 50%}
#drum5{bottom: 6%; left: 64%}
#instruction{position: absolute;bottom: 0; left: 29%}
#poem{
	width: 340px;
  height: 210px;
  font-size: 27px;
  font-family: 'Noto Serif TC', serif;
  color: #12120c;
  text-orientation: upright;
  writing-mode: vertical-rl;
  line-height: 160%;
  position: absolute;
  top: 16%;
  left: -11%;
}
#poem span {opacity: 0.2}
#next{position: absolute; bottom: -2%; right: 1%}

.final{
	background:url('img/intermediaire.jpg');
}
#translation{
	font-family: 'Ma Shan Zheng', cursive;
    width: 296px;
    position: absolute;
    top: 11%;
    left: 11%;
    font-size: 22px;
    line-height: 34px;
    text-align: left;
}
.final p{
	width: 320px;
    position: absolute;
    top: 15%;
    left: 49%;
}
.final b{
	color: #E21A6F;
	font-size:24px;
}
#hscore{
	cursor: pointer;
	color: #FF8000;
	font-size: 18px;
}