@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Gloock&family=Hina+Mincho&family=Kristi&family=M+PLUS+2:wght@100..900&family=Patua+One&family=Zen+Antique&display=swap');

body {
	overflow: hidden;
}

ol {
	list-style: none;
	list-style-position:inside;
}

i{
	color: rgba(40,200,160,0.9);
}

/* 預設顯示英文，隱藏中文 */
body:not([data-lang="zh"]) .lang-zh {
    display: none;
}

/* 當 data-lang="zh" 時，顯示中文，隱藏英文 */
body[data-lang="zh"] .lang-en {
    display: none;
}

body[data-lang="zh"] .lang-zh {
    display: inline-block;  /* 確保中文顯示 */
}


#header {
	display: none;
}
	

.headline > h1::before, h2::before {
    content: "";
    position: absolute;
	margin: 0vh 0vh;
    top: 0%; /* 控制背景與文字的距離 */
    left: -2.5%;
    width: calc(100% + 5%); /* 增加背景的寬度 */
    height: calc(100% + 10%); /* 增加背景的高度 */
	background-color: rgba(40,200,160,.8); /* h1 h2底色 */		
	z-index: -1;
	transition: all 2s ease-in-out 1s;
}	

.headline > h1 {
	font-family: "Gloock", "Zen Antique";		
	font-size: 7vw;
	position: absolute;
	left: -5%;
	top: -25%;
	color: rgba(40,200,160,.1);	 /* h1字色 */	
	opacity: 80;
	transition: all 1.5s ease-in-out .5s;	
	z-index: 1;
	mix-blend-mode:darken;	
}	

body:has(.content:hover) h1 {
	left: -15%;
	top: -40%;
	opacity: 0;	
	transition: all 2s ease-in-out .5s;
}

.headline > h2 {
	font-family: "Gloock", "Zen Antique";		
	font-size: 7vw;
	position: absolute;
	right: 3%;
	bottom: -12%;
	color: rgba(40,200,160,.1);	 /* h2字色 */		
	opacity: 80;
	transform: rotate(90deg);			
    transform-origin: bottom right; 	
	transition: all 1s ease-in-out .5s;	
	z-index: 1;
	mix-blend-mode:darken;	
}	
	
body:has(.content:hover) h2 {
	right: -3%;
	bottom: -60%;
	opacity: 0;
	transition: all 1.5s ease-in-out .5s;
}

#news{	
	display:flex; /*Y軸改成block，X軸改成flex*/
	position: relative;
	overflow:hidden;
	list-style: none;
	transition: all 1.5s ease-in-out .5s;
}


.headline {
	height: 100vh;
	width: 100vw;
	position: relative;	
	border: solid white;
	border-width: 15vh 20vh;
    box-sizing: border-box;
	transition: all .5s ease-in-out .5s;
}

.content {
	height: 90%;
	width: 100%;
	filter: contrast(0.80) brightness(1.2) grayscale(95%) sepia(10%);
	transition: all .5s ease-in-out .5s;
}

.content:hover {
	height: 100%;
	width: 100%;
	filter: contrast(1.0) brightness(1.3) grayscale(0%) sepia(0%);

}

.headline:has(.content:hover) { 
	height: 100vh;
	width: 100vw;
	border: 0vh solid white;
    box-sizing: border-box;
	transition: all 1s ease-in-out .5s;
}

#headline-1 .content{	
	background: url(../img/overlays/05g.png), url(../img/headline1.jpg);
	background-size: auto 0.2%, cover;
	background-attachment: fixed;
	text-align: center;
	background-blend-mode: multiply;
	background-position: 50% 30%;
}

body:has(.content:hover) .description.odd{
	right: -10%;
	bottom: -5.5%;
	font-size: 1vw;	
	letter-spacing: 5vw;	
	filter: blur(1vw);	
	opacity: 0;	
	transition: all 1.2s ease-in-out .5s;	
}

body:has(.content:hover) .description.even{
	left: -10%;
	top: -5.5%;
	font-size: 1vw;	
	letter-spacing: 5vw;
	filter: blur(1vw);
	opacity: 0;	
	transition: all 1.2s ease-in-out .5s;	
}

.description{
	font-family: "Dela Gothic One";	
	font-size: .8vw;
	text-transform:lowercase;	
	position: absolute;	
	color: rgba(255,255,255,.9);
	opacity: 100;
	mix-blend-mode: exclusion;	
	transition: all 1.5s ease-in-out .5s;	
	z-index: 100;		
	}
	
.description.lang-en.odd{
	letter-spacing: .8vw;
	right: -5.5%;
	bottom: 20%;
}	

.description.lang-zh.odd{
	letter-spacing: 3vw;
	position: absolute;
	right: -10%;
	bottom: 20%;
}

.description.lang-en.even{
	letter-spacing: 1vw;
	position: absolute;
	left: -5%;
	top: 20%;
}	

.description.lang-zh.even{
	letter-spacing: 3vw;
	position: absolute;
	left: -8%;
	top: 20%;
}

#headline-1 h1::after{
    content: "Dêqên";	
	mix-blend-mode: multiply;	
}

#description-1-en::after{
	content: "Pond Xueda";
}

#description-1-zh::after{
	content: "雪達湖";
}

#headline-2 .content{
	background: url(../img/overlays/05g.png), url(../img/headline2.jpg);
	background-size: auto 0.2%, cover;
	background-attachment: scroll;
	text-align: center;
	background-blend-mode: multiply;
	background-position: 50% 30%;
	
}

#headline-2 h2::after{
    content: "Linze";	
	mix-blend-mode: multiply;	
}

#description-2-en::after{
	content: "National Geopark";
}

#description-2-zh::after{
	content: "國家地質公園";
}

#headline-3 .content{
	background: url(../img/overlays/05g.png), url(../img/headline3.jpg);
	background-size: auto 0.2%, cover;
	background-attachment: fixed;
	text-align: center;
	background-blend-mode: multiply;
	background-position: 50% 50%;	
}

#headline-3 h1::after{
    content: "Baykal";	
	mix-blend-mode: multiply;		
}

#description-3-en::after{
	content: "Posyolok Khuzhir";
}

#description-3-zh::after{
	content: "胡日爾村";
}

#headline-4 .content{
	background: url(../img/overlays/05g.png), url(../img/headline4.jpg);
	background-size: auto 0.2%, cover;
	background-attachment: scroll;
	text-align: center;
	background-blend-mode: multiply;
	background-position: 50% 50%;	
}

#headline-4 h2::after{
    content: "Batang";	
	mix-blend-mode: multiply;	
}

#description-4-en::after{
	content: "Lake Cuopu";
}

#description-4-zh::after{
	content: "措普溝";
}

#headline-5 .content{
	background: url(../img/overlays/05g.png), url(../img/headline5.jpg);
	background-size: auto 0.2%, cover;
	background-attachment: scroll;
	text-align: center;
	background-blend-mode: multiply;
	background-position: 50% 70%;	
}

#headline-5 h1::after{
    content: "Alxa";	
	mix-blend-mode: multiply;
}

#description-5-en::after{
	content: "Badain Jaran";
}

#description-5-zh::after{
	content: "巴丹吉林沙漠";
}

.label {
	border-radius:20px;
	display:block;
	z-index:99;
	height: auto;
	width: auto;
	text-align: left;
	margin: 0% 10% 0 10%;
	box-shadow: 0px 0px 10px 2px rgba(100,100,100,.5),
	          0px 0px 100px 200px rgba(250,250,250,.95) inset;
}

.title {
	color: rgba(40,200,160,.9);
	text-transform:uppercase;
	font-weight:bold;
	font-size:36px;
	letter-spacing: 3pt;
	font-family: GenJyuuGothic, The Bold Font, Century Gothic, Sans-serif;
	padding: 4vh 10vh 1vh 10vh;
}

.article {
	color: rgba(100,100,100,1);
	font-size:14px;
	letter-spacing: 1pt;
	line-height: 16pt;
	font-family: 'Open Sans', Microsoft JhengHei, Century Gothic, Sans-serif;
	padding: 0 10vh 5vh 10vh;
}

#meng-icon {
    width: 5vw;
    top: 4vh;
    left: 92vw;
    position: fixed;
    display: block; 
	cursor: pointer;
	z-index: 99;
}

#meng-icon:hover #meng-icon-solar {
	fill: rgba(180,180,180,.7);
	transition: all .5s ease-in-out .5s;
}

#meng-icon:hover #meng-icon-luna {
	fill: rgba(40,200,160,.8);
	transition: all .5s ease-in-out .5s;
}

#meng-icon-solar {
	fill: rgba(180,180,180,.2);
	transition: all .5s ease-in-out .5s;
}

#meng-icon-luna {
	fill: rgba(40,200,160,.3);
	transition: all .5s ease-in-out .5s;
}

body:has(.content:hover) #meng-icon-solar {
	fill: rgba(100,100,100,.2);
	transition: all .5s ease-in-out .5s;
}

body:has(.content:hover) #meng-icon-luna {
	fill: rgba(180,180,180,.2);
	transition: all .5s ease-in-out .5s;
}

.switch {
	height:100px;
	width:2vh;
	left:7.5vh;
	bottom:22vh;
	position: fixed;
	z-index: 99;	
	transition: all .5s ease-in-out .5s;
}

body:has(.content:hover) .switch {
	left:-5vh;
	bottom:5vh;
	transition: all 1s ease-in-out .5s;
}

body:has(.content:hover) .brick {
	border-radius: 0.3vw;
	height: .8vw;
	width: .8vw;
	margin: .8vw;
	transition: all .5s ease-in-out .5s;
}

.brick {
	border-radius: 0.25vw;
	height: .7vw;
	width: .7vw;
	margin: .7vw;
	background: rgba(180,180,180,.2);
	cursor: pointer;
	transition: all .5s ease-in-out .5s;
}

.brick:hover {
	background: rgba(250,250,250,1)!important;
}

body:has(.content:hover) .copyright {
	font-family: "M PLUS 2";	
	letter-spacing: 0.2vw;
	font-size: .6vw;
	font-weight:bold;	
	bottom: 6vh;	
	color: rgba(255,255,255,0.5);
	text-shadow: .05vw .05vw rgba(50,50,50,0.5);	
	transition: all 1.45s ease-in-out .1s;	
}