@import url('https://fonts.bunny.net/css?family=Chicle&display=swap');

/*ANIMATION ==========*/
@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;}
.animated-quick {animation-duration: 0.5s}
@keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);} 40%, 45% {opacity: 1; transform: translate3d(0, 20px, 0);}
  to {opacity: 0; transform: translate3d(0, -2000px, 0);}
}
.bounceOutUp {animation-name: bounceOutUp}

.b {
  border-radius: 50%;
  float: left;
  margin-top: -5px;
  position: absolute;
}
.b:nth-child(1) {
  margin-left: 0%;
  width: 7px;
  height: 7px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(235, 235, 235, 0.5);
  animation: fall 28s 2s infinite;
}
.b:nth-child(2) {
  margin-left: 10%;
  width: 10px;
  height: 10px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(232, 232, 232, 0.5);
  animation: fall 15s 4s infinite;
}
.b:nth-child(3) {
  margin-left: 18%;
  width: 9px;
  height: 9px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(247, 247, 247, 0.5);
  animation: fall 15s 10s infinite;
}
.b:nth-child(4) {
  margin-left: 32%;
  width: 7px;
  height: 7px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(252, 252, 252, 0.5);
  animation: fall 25s 6s infinite;
}
.b:nth-child(5) {
  margin-left: 40%;
  width: 3px;
  height: 3px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(235, 235, 235, 0.5);
  animation: fall 26s 9s infinite;
}
.b:nth-child(6) {
  margin-left: 56%;
  width: 7px;
  height: 7px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5);
  animation: fall 23s 4s infinite;
}
.b:nth-child(7) {
  margin-left: 61%;
  width: 5px;
  height: 5px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(242, 242, 242, 0.5);
  animation: fall 20s 11s infinite;
}
.b:nth-child(8) {
  margin-left: 75%;
  width: 9px;
  height: 9px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(237, 237, 237, 0.5);
  animation: fall 26s 6s infinite;
}
.b:nth-child(9) {
  margin-left: 80%;
  width: 7px;
  height: 7px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(245, 245, 245, 0.5);
  animation: fall 30s 7s infinite;
}
.b:nth-child(10) {
  margin-left: 92%;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5);
  animation: fall 15s 11s infinite;
}
@keyframes fall {
  0% {transform: scale(0);}
  2% {transform: scale(1); top: -50px;}
  100% {transform: scale(0); top: 100%;}
}

#navContent, .splash, .final, #gameplay,#instructions, #choiceofpinyin, .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;
	line-height: normal;
}
.splash{
	background:url('img/splash.png');
	overflow: auto;
	border: 4px solid #38c6cb;
	box-sizing: border-box;
	border-radius: 7px
}
.splash-btn{
	width: 170px;
    position: absolute;
    z-index: 10;
    bottom: 18px;
    right: 55px;
}
[class*='-btn'] span{
	color: #ffa801;
	cursor: pointer;
}
[class*='-btn'] span:hover{
	color: #01d015;
	transition: .5s ease;
}
#start, #gotit{
    letter-spacing: 3px;
    font-family: "Chicle", serif;
    height: 45px;
    width: 130px;
    color: #fff;
    line-height: 47px;
    font-weight: bold;
    font-size: 36px;
    background-color: #ff0028;
    border: 3px solid #ffb900;
    cursor: pointer;
    border-radius: 7px;
    position: absolute;
    bottom: 5%;
    right: 40%;
}
#start:hover, #gotit:hover{
	box-shadow: inset 0px -40px 25px -25px rgb(255 174 1 / 90%);
	transition: .5s ease;
}
.splash-panel{
	display:none;
	background-color: #FFF;
	border: 5px solid #38c6cb;
	border-radius: 7px;
	color: cadetblue;
	padding:12px;
	box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	position: absolute;
	z-index: 12;
	left: 90px;
	bottom: 110px;
	width:420px;  
	height:225px;
	text-align: left;
	line-height: 28px;
}
.splash-panel span, #instructions span{font-family: "Chicle", serif; font-size: 34px; display: block; padding-bottom: 15px}
.splash-panel em, #instructions em{
	background-color: #bcfdff;
    padding: 1px 11px;
    font-style: normal;
    font-size: 18px;
    border: 1px solid #baf4f6;
}
#instructions{
  display: none;
	color: cadetblue;
	padding: 10px 42px;
	box-sizing: border-box;
	border: 4px solid #38c6cb;
	box-sizing: border-box;
	border-radius: 7px
}
#instructions p{text-align: left; line-height: 33px}
#instructions b{font-family: "Chicle", serif; font-size: 46px;letter-spacing: 1px;}
#gameplay{
	background: url('img/snowman0.png');
	font-size: 26px;
	color: cadetblue;
	border: 4px solid #38c6cb;
	box-sizing: border-box;
	border-radius: 7px
 }
ol {
	list-style: none;
  counter-reset: item;
  cursor: pointer;
  text-align: left;
  width: 340px;
  position: absolute;
  right: 5%;
  top: 22%;
}
li {counter-increment: item; margin-bottom: 5px}
li:before {
 margin-right: 10px;
 content: counter(item);
 background: #38c6cb;
 border-radius: 100%;
 color: white;
 width: 1.6em;
 text-align: center;
 display: inline-block;
}
li:hover {color: #f70808}
.progression{
 	width: 136px;
 	height:24px;
	display:block;
	background-color:#e6fde3;
	border-radius: 10px;
	position: absolute;
	color:#548f14;
	font-weight: bold;
	font-size: 14px;
 }
 .score{left: 44%;bottom: 27px}
 .toggle-pinyin{cursor: pointer;left: 70%;bottom: 27px}
#questionContainer{
	display: block;
    width: 400px;
    position: absolute;
    top: 0;
    right: 3%;
}
#optionsContainer em {
	font-size: 20px;
    font-family: arial, sans-serif;
    color: #54cb38;
    padding: 5px 0 10px 50px;
    display: block;
    font-style: normal;
}
#good-feedback, #bad-feedback {
	width: 340px;
	height: 102px;
	font-family: "Chicle", serif;
	font-size: 50px;
	letter-spacing: 3px;
	color: white;
	text-shadow: 1px 1px 8px rgba(150, 150, 150, 1);
	position: absolute;
	top: 29%;
	left: 1%;
	display: none;
}