*{

margin:0;
padding:0;

box-sizing:border-box;

}



html,body{

width:100%;
height:100%;

overflow:hidden;

font-family:

"Microsoft YaHei",
sans-serif;

}



#sky{

width:100vw;

height:100vh;


position:relative;
  

position:fixed;


background:

linear-gradient(

to bottom,

#020617,

#0f172a,

#334155

);


}



/* 标题 */

.title{


position:absolute;


top:38%;


width:100%;


text-align:center;


color:white;


z-index:30;


text-shadow:

0 0 20px #fff;


}


.title h1{


font-size:55px;


letter-spacing:8px;


}


.title p{


margin-top:20px;


font-size:20px;


opacity:.8;


}




/* 月亮 */


.moon{


position:absolute;


right:15%;

top:12%;


width:120px;

height:120px;


border-radius:50%;


background:#fff;


box-shadow:


0 0 40px white,


0 0 100px #fff;

z-index:5;

}
#stars{

z-index:6;

}

/* 雪山 */


.mountain{


position:absolute;


bottom:0;


width:100%;

height:220px;


background:

linear-gradient(

135deg,

transparent 50%,

#cbd5e1 50%

);


opacity:.35;
  

}



/* 森林 */


.forest{


position:absolute;


bottom:0;


width:100%;


height:120px;


background:

linear-gradient(

to top,

#020617,

transparent

);


z-index:5;


}
#snow{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

z-index:20;

pointer-events:none;

}
.city{


position:absolute;

width:100%;

height:100%;


background-image:

linear-gradient(
rgba(2,6,23,.45),
rgba(2,6,23,.8)
),

url("../assets/images/city-night.jpg");



background-size:cover;


background-position:center;


z-index:1;


}
.city::after{


content:"";


position:absolute;


width:100%;

height:100%;


background:

radial-gradient(
circle at 30% 70%,
rgba(255,220,120,.25),
transparent 20%
),


radial-gradient(
circle at 80% 60%,
rgba(255,220,120,.2),
transparent 15%
);



animation:
light 5s infinite alternate;


}



@keyframes light{


from{

opacity:.4;

}


to{

opacity:.8;

}


}
#musicBtn{


position:fixed;


left:50%;


bottom:30px;


transform:translateX(-50%);



width:60px;


height:60px;



border-radius:50%;



border:1px solid rgba(255,255,255,.8);



background:rgba(255,255,255,.2);



color:white;



font-size:28px;



z-index:999999;



display:flex;


align-items:center;


justify-content:center;



backdrop-filter:blur(8px);


}