/* 平滑滚动 */
html{
	scroll-behavior: smooth;
	background-color: #232323;
}

/* 全局字体/限制宽度 */
body{
	margin: 0;
	font-family: "Exo-Regular";
	min-width: 55rem;
	overflow-x: hidden;
}

/* 去除下划线 */
a{
	text-decoration: none;
}

/* 去除列表序号 */
ul{
	margin: 0;
	list-style: none;
}

/* 去除间距 */
h1, h2{
	margin: 0;
}

/* 页内跳转/修正定位位置 */
#gamecontent, #aboutus, #update{
	float: left;
	margin-top: -4.9rem;
}

/* 启动时加载界面 */
.loading{
	transition: all 1s;
	z-index: 103;
	position: fixed;
	font-size: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: skyblue;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
}

/* 加载完毕 */
.loaded{
	transition: opacity 1s;
	animation-delay: 2s !important;
	animation: language_change 1.4s;
	z-index: 103;
	position: fixed;
	font-size: 5rem;
	font-family: "Exo-Regular", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: skyblue;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

/* 切换语言过渡动画 */
@keyframes language_change{
	0%{
		width: 0;
		left: 0;
		opacity: 1;
		overflow: hidden;
		display: block !important;
		font-size: 1rem;
	}
	45%{
		width: 100%;
		left: 0;
		display: block !important;
		font-size: 4rem;
	}
	55%{
		width: 100%;
		left: 0;
		display: block !important;
		font-size: 4rem;
	}
	100%{
		width: 0%;
		left: 100%;
		opacity: 1;
		overflow: hidden;
		display: none;
		font-size: 1rem;
	}
	
}

/* 加载中模糊背景（不展示，用于加载完成后过渡） */
.blur{
	transition: all 1s;
	z-index: 102;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	position: fixed;
}

/* 加载完成后过渡至无模糊 */
.unblur{
	transition: all 1s;
	z-index: 102;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	position: fixed;
}

/* 顶部导航栏 */
#header{
	transition: all.3s;
	top: 0;
	z-index: 101;
	position: sticky;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: "Exo-Regular", sans-serif;
	background-color: #00000020;
	.align{
		padding: 0 2.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 5rem;
		.logo{
			line-height: 0;
			font-weight: bold;
			/* Logo */
			img{
				cursor: pointer;
				transition: transform.3s;
				height: 3.13rem;
				width: 3.13rem;
				&.rotatearound{
					transform: rotate(540deg);
				}
			}
			/* 游戏名 */
			p{
				float: right;
				line-height: 1.25rem;
			}
		}
		/* 移动端UI（隐藏） */
		.menu{
			display: none;
		}
		/* 导航栏 */
		.navbar{
			display: flex;
			flex-flow: row wrap;
			column-gap: 2.63rem;
			margin-left: 1.25rem;
			position: relative;
			ul{
				li{
					display: inline;
					a{
						transition: all.3s;
						padding: 0 1.25rem;
						cursor: pointer;
						transition: all.2s;
						color: black;
						text-align: center;
						top: 0;
						padding-bottom: 0;
						position: relative;
						span{
							transition: all.3s;
							position: absolute;
							top: 100%;
							left: 50%;
							width: 0;
							height: 0.13rem;
							background-color: rgb(168, 230, 255);
						}
					}
					&:hover{
						a{
							padding-bottom: 0.38rem;
							top: -0.19rem;
							span{
								border-radius: 1.88rem;
								left: 15%;
								height: 0.32rem;
								width: 70%;
							}
						}
					}
					/* 语言切换按钮 */
					button{
						transition: all.3s;
						border: none;
						background: none;
						cursor: pointer;
						&:hover{
							font-size: 1rem;
							color: rgb(168, 230, 255) !important;
						}
					}
				}
			}
		}
	}
}

/* 移动端UI（隐藏） */
.other{
	display: none;
}

/* 通用标题 */
.topbar{
	transition: color.3s;
	font-size: 1.88rem;
	background-color: #00000070;
	color: white;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	height: 5rem;
	line-height: 5rem;
	top: 4.9rem;
	z-index: 99;
	position: sticky;
}

/* 主内容 */
.main{
	margin: 0 auto;
	text-align: center;
	/* 主页 */
	.top{
		margin-top: -5rem;
		padding-top: 5rem;
		background-image: url("img/Background/WindyHill.jpeg"); /*WindyHill.jpeg*/
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		font-family: "Exo-Regular", sans-serif;
		.title{
			h1{
				font-size: 3.5rem;
				font-weight: 600;
				padding-top: 5rem;
			}
		}
		.describe{
			margin-top: 1rem;
			font-size: 1.88rem;
			position: relative;
			width: 60%;
			left: 20%;
		}
		.join{
			margin-top: 3.13rem;
			a{
				transition: all.3s;
				color: black;
				padding: 0.63rem 1.44rem;
				font-size: 1rem;
				box-shadow: 0 0 1rem 0.03rem #00000096;
				display: block;
				width: 4.38rem;
				margin: auto;
				&:hover{
					padding: 0.69rem 1.56rem;
					border-radius: 1.44rem !important;
					background-color: white;
					box-shadow: 0 0 1.88rem white;
					color: black;
					font-size: 1.15rem;
				}
				&.up{
					border-radius: 1.44rem 1.44rem 0.31rem 0.31rem;
					margin-bottom: 0.19rem;
				}
				&.down{
					border-radius: 0.31rem 0.31rem 1.44rem 1.44rem;
				}
			}
			padding-bottom: 5rem;
		}
		.download{
			ul{
				padding-left: 0;
				padding-bottom: 2rem;
				width: 100%;
				li{
					transition: all.2s;
					display: inline;
					position: relative;
					border-radius: 0.31rem;
					box-shadow: 0 0 1rem 0.03rem #00000096;
					top: 0;
					padding: 0.3rem;
					&:first-child{
						border-radius: 1.44rem 0.71rem 0.71rem 1.44rem;
					}
					&:last-child{
						border-radius: 0.71rem 1.44rem 1.44rem 0.71rem;
					}
					a{
						transition: all.2s;
						position: relative;
						color: black;
						padding: 0 2rem;
						span{
							transition: all.2s;
							position: absolute;
							text-align: center;
							margin-left: -2rem;
							width: 100%;
							height: 0;
							top: 10%;
							overflow: hidden;
						}
						img{
							height: 1rem;
							width: 1rem;
							position: relative;
							top: 0.14rem;
						}
					}
					&:hover{
						z-index: 2;
						background-color: white;
						padding-top: 2rem;
						top: 0.8rem;
						box-shadow: 0 0 1rem white;
						border-radius: 1.44rem;
						span{
							top: 10%;
							height: 100%;
						}
						a{
							padding-top: 2rem;
						}
					}
				}
			}
		}
	}
	/* 游戏内容 */
	#content{
		font-family: "CAVIARDREAMS";
		transition: background-image.3s;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #00000020;
		/* 移动端UI（隐藏） */
		.menuDiv{
			display: none;
			.menu{
				display: none;
			}
		}
		/* 内容 */
		.content{
			transition: height 1s;
			background-color: #00000030;
			height: 125rem;
			/* 移动端UI（隐藏） */
			.shadow{
				display: none;
			}
			/* 侧边导航栏 */
			.nav{
				transition: color.3s;
				color: white;
				width: 12.5rem;
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				background-color: #00000070;
				padding: 3.13rem 0 3.13rem 0;
				top: 9.9rem;
				z-index: 90;
				position: sticky;
				border-radius: 0 0 1.88rem 1.88rem;
				li{
					padding: 2.5rem 0;
					cursor: pointer;
					font-size: 1.25rem;
					position: relative;
					span{
						position: absolute;
						top: 0;
						left: 0;
						width: 0;
						height: 100%;
						background-color: #ffffff40;
					}
					&:not(&[class*="selected"]):hover span{
						transition: all.3s;
						left: 0;
						width: 100%;
					}
					.leave{
						transition: all.3s;
						left: 100%;
					}
				}
				.selected{
					background-color: #ffffff90;
					color: black;
				}
				a{
					color: white;
				}
			}
			/* 这个是真的内容了 */
			.listContent{
				transition: all.3s;
				display: none;
				opacity: 0;
				/* 文字 */
				p{
					width: 25rem;
					margin-bottom: 4.38rem;
					text-align: left;
					font-size: 1.88rem;
					color: white;
					text-shadow: 0 0 0.31rem;
					.version{
						margin-left: 0.19rem;
						display: block;
						font-size: 1rem;
						color: #ffffff80;
					}
				}
				/* 图片 */
				div{
					transition: all.3s;
					height: 19.38rem;
					width: 31.25rem;
					border-radius: 1.56rem;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;
					box-shadow: 0 0 1.25rem white;
					position: relative;
					margin-top: -3.13rem;
				}
				/* 移动端UI（隐藏） */
				.tip{
					display: none;
				}
				/* 第一行 */
				.first{
					margin-top: -26.25rem;
				}
				/* 居左 */
				.left{
					margin-left: 18.13rem;
					margin-right: auto;
				}
				/* 居右 */
				.right{
					margin-left: auto;
					margin-right: 5.63rem;
				}
				/* 左图片过渡动画 */
				div.left:hover{
					z-index: 89 !important;
					height: 25.63rem;
					width: 42.5rem;
					margin-left: 12.5rem;
				}
				/* 右图片过渡动画 */
				div.right:hover{
					z-index: 89 !important;
					height: 25.63rem;
					width: 42.5rem;
					margin-right: 0;
				}
				/* 文字居左 */
				p.left{
					margin-left: 21.25rem;
				}
				/* 文字居右 */
				p.right{
					margin-right: 8.75rem;
				}
			}
			/* 淡出(动画) */
			.imgout{
				transition: all.3s;
				display: block;
				opacity: 0;
				.first{
					transition: all.3s;
					margin-top: -33.75rem;
				}
			}
			/* 淡入(动画) */
			.imgin{
				transition: all.3s;
				display: block;
				opacity: 1;
				.first{
					transition: all.3s;
					margin-top: -30rem;
				}
			}
			/* 关卡信息特殊调整 */
			#levelinfo{
				div{
					height: 17.44rem;
					a{
						p{
							height: 100%;
							width: 100%;
							color: transparent;
						}
					}
					&:hover{
						height: 23.69rem;
					}
				}
			}
		}
	}
	/* 关于我们 */
	.aboutus{
		background-image: url("img/Background/TheSeasons1.jpeg"); /* TheSeasons1.jpeg */
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #000000A0;
		/* 内容 */
		.content{
			img{
				margin: 1.25rem;
				width: 6.25rem;
				height: 6.25rem;
				filter: drop-shadow(0 0 10px white);
			}
			/* 文字 */
			.text{
				color: white;
				padding: 0 2.5rem 3.13rem 2.5rem;
				p{
					margin: 0.63rem;
					text-align: center;
					font-size: 1.13rem;
				}
			}
		}
	}
	/* 更新速览 */
	.update{
		background-image: url("img/Background/TheSeasons2.jpeg"); /* TheSeasons2.jpeg */
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-blend-mode: color;
		background-color: #000000A0;
		/* 内容 */
		.content{
			color: white;
			padding: 1.25rem 2.5rem 3.13rem 2.5rem;
			.version{
				font-size: 2rem;
				font-weight: 600;
			}
		}
	}
}

/* 底部Copyright */
.copyright{
	margin: 0;
	background-color: #232323;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
	color: white;
}

/* 以下为预加载内容 */
.gameback1{
	background-image: url("img/Background/loading.jpeg"); /*loading.jpeg*/
}
.gameback2{
	background-image: url("img/Background/Dramamine.jpeg"); /*Dramamine.jpeg*/
}
.gameback3{
	background-image: url("img/Background/23C95B7D8B6AAC2EBD2.jpeg"); /*23C95B7D8B6AAC2EBD2.jpeg*/
}
.gameback4{
	background-image: url("img/Background/WH.jpeg"); /*WH.jpeg*/
}

.chapter1{
	background-image: url("img/TimeLine/TimeLine1.jpeg"); /*TimeLine1.jpeg*/
}
.chapter2{
	background-image: url("img/TimeLine/TimeLine2.jpeg"); /*TimeLine2.jpeg*/
}
.level1{
	background-image: url("img/TimeLine/Level1.jpeg"); /*Level1.jpeg*/
}
.level1_select{
	background-image: url("img/TimeLine/Level1-Select.jpeg"); /*Level1-Select.jpeg*/
}
.level2{
	background-image: url("img/TimeLine/Level2.jpeg"); /*Level2.jpeg*/
}
.level2_select{
	background-image: url("img/TimeLine/Level2-Select.jpeg"); /*Level2-Select.jpeg*/
}

.startui{
	background-image: url("img/In-Game/StartUI.jpeg"); /*Level2-Select.jpeg*/
}
.endui{
	background-image: url("img/In-Game/EndUI.jpeg"); /*Level2-Select.jpeg*/
}

.setting1{
	background-image: url("img/Setting/Setting-Quatily.jpeg"); /*Setting-Quatily.jpeg*/
}
.setting2{
	background-image: url("img/Setting/Setting-Audio.jpeg"); /*Setting-Audio.jpeg*/
}
.setting3{
	background-image: url("img/Setting/Setting-About.jpeg"); /*Setting-About.jpeg*/
}
.setting4{
	background-image: url("img/Setting/Setting-Language.jpeg"); /*Setting-Language.jpeg*/
}
.setting5{
	background-image: url("img/Setting/Setting-Version.jpeg"); /*Setting-Version.jpeg*/
}
.setting6{
	background-image: url("img/Setting/Setting-Account.jpeg"); /*Setting-Account.jpeg*/
}

.level_thebeginning_old{
	background-image: url("img/Level/TheBeginning-old.jpeg"); /*TheBeginning-old.jpeg*/
}
.level_beginning_and_end{
	background-image: url("img/Level/Beginning and End.jpeg"); /*Beginning and End.jpeg*/
}
.level_rainnight{
	background-image: url("img/Level/RainNight.jpeg"); /*RainNight.jpeg*/
}
.level_desert{
	background-image: url("img/Level/Desert.jpeg"); /*Desert.jpeg*/
}
.level_windyhill{
	background-image: url("img/Level/WindyHill.jpeg"); /*WindyHill.jpeg*/
}
.level_thebeginning{
	background-image: url("img/Level/TheBeginning.jpeg"); /*TheBeginning.jpeg*/
}
.level_tears_of_illusion{
	background-image: url("img/Level/Tears of illusion.jpeg"); /*Tears of illusion.jpeg*/
}
.level_the_seasons{
	background-image: url("img/Level/The Seasons.jpeg"); /*The Seasons.jpeg*/
}
.level_dream_of_piano{
	background-image: url("img/Level/Dream of Piano.jpeg"); /*Dream of Piano.jpeg*/
}
.level_dramamine{
	background-image: url("img/Level/Dramamine.jpeg"); /*Dramamine.jpeg*/
}
.level_luminescence{
	background-image: url("img/Level/Luminescence.jpeg"); /*Luminescence.jpeg*/
}
.level_theremnant{
	background-image: url("img/Level/TheRemnant.jpeg"); /*TheRemnant.jpeg*/
}