*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}


body{

height:100vh;

overflow:hidden;

color:white;

background:

linear-gradient(
rgba(0,0,0,.85),
rgba(15,0,30,.95)
),

radial-gradient(circle,#303060,#000);

}




button{

padding:15px 45px;

margin:15px;

font-size:22px;

border:none;

border-radius:20px;

background:#8a2be2;

color:white;

cursor:pointer;

box-shadow:

0 0 25px purple;

}



button:hover{

transform:scale(1.1);

}





/* DIFFICULTY MENU */

#difficulty{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.85);

z-index:100;


}



#difficulty h1{

font-size:70px;

text-align:center;

text-shadow:

0 0 30px purple;

}



#difficulty p{

font-size:30px;

margin:20px;

}





/* SNOW */

#snow{

position:absolute;

inset:0;

pointer-events:none;

z-index:90;


background:

radial-gradient(circle,white 2px,transparent 3px);


background-size:

80px 80px;


animation:snow 8s linear infinite;


}



@keyframes snow{


from{

background-position-y:-200px;

}


to{

background-position-y:900px;

}


}






/* GAME UI */


.game-ui{

position:absolute;

top:20px;

width:100%;

text-align:center;

z-index:10;

}



.game-ui h1{

font-size:45px;

text-shadow:

0 0 20px purple;

}




.stats{

display:flex;

justify-content:center;

gap:35px;

font-size:22px;

}





/* WORLD */


#world{

position:relative;

width:900px;

height:550px;

margin:100px auto;


background:

linear-gradient(
rgba(0,0,0,.2),
rgba(0,0,0,.8)
),

#061008;



border:3px solid purple;


box-shadow:

0 0 50px purple;


overflow:hidden;

}





#moon{

position:absolute;

right:70px;

top:30px;

font-size:110px;

filter:

drop-shadow(0 0 30px white);

}





#player,
#snake,
#door{

position:absolute;

font-size:55px;

z-index:5;

}




#player{

left:120px;

top:250px;

animation:

playerAnim .8s infinite alternate;

}



@keyframes playerAnim{

from{

transform:translateY(0);

}

to{

transform:translateY(-8px);

}

}





#snake{

left:700px;

top:260px;

animation:

snakeAnim .5s infinite alternate;

}



@keyframes snakeAnim{

from{

transform:scale(1);

}

to{

transform:scale(1.15);

}

}





#door{

right:40px;

bottom:40px;

}





/* LIGHT */

#light{

position:absolute;

width:240px;

height:240px;


border-radius:50%;


background:

radial-gradient(
circle,
rgba(255,255,200,.35),
transparent 70%
);


z-index:4;

}





/* FOG */


#fog{

position:absolute;

inset:0;


background:

radial-gradient(
circle,
transparent 20%,
rgba(0,0,0,.8)
);


animation:

fogMove 8s infinite alternate;


z-index:3;

}



@keyframes fogMove{


from{

opacity:.4;

}

to{

opacity:.9;

}

}





/* TREES */


.tree{

position:absolute;

font-size:65px;

z-index:2;

}



.t1{

left:50px;

top:90px;

}



.t2{

left:260px;

top:70px;

}



.t3{

right:220px;

top:180px;

}



.t4{

left:450px;

bottom:40px;

}



.t5{

right:80px;

bottom:170px;

}



.t6{

left:700px;

top:70px;

}





/* RESULT */


#message{

display:none;

position:absolute;

top:40%;

width:100%;


text-align:center;


z-index:200;


background:

rgba(0,0,0,.8);


padding:40px;

}



#message h2{

font-size:55px;

text-shadow:

0 0 30px purple;

}