*
{
margin:0;
padding:0;
box-sizing:border-box;
}



.navbar{

font-family:"Bungee",sans-serif;

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;


display:flex;

justify-content:space-between;

align-items:center;


padding:15px 30px;


background-color:#a3b899;


transition:transform .3s ease-out;

}



.navbar.hidden{

transform:translateY(-100%);

}




.logo{

color:#fceee9;

font-size:24px;

font-weight:bold;

}




.nav-links{

display:flex;

gap:20px;

}



.nav-links a{


position:relative;

overflow:visible;


color:#fceee9;

text-decoration:none;


padding:8px 14px;

border-radius:8px;



transition:

transform .25s ease,

background .25s ease,

text-shadow .25s ease;


}





.nav-links a::after{


content:"";

position:absolute;


left:14px;

right:14px;


bottom:2px;


height:3px;


background:#fceee9;


transform:scaleX(0);


transition:transform .25s ease;


}





.nav-links a.active::after{

transform:scaleX(1);

}





.nav-links a:hover{


transform:translateY(-4px);


text-shadow:

0 0 5px rgba(255,255,255,.8),

0 0 10px rgba(255,255,255,.5),

0 0 20px rgba(255,255,255,.3);


}






.sparkle{


position:absolute;


pointer-events:none;


color:white;


font-size:14px;



text-shadow:

0 0 5px white,

0 0 10px white,

0 0 20px white;



animation:sparkleFloat .9s ease forwards;


}





@keyframes sparkleFloat{


0%{

opacity:0;

transform:

translate(0,0)

scale(.4)

rotate(0deg);


}



20%{

opacity:1;

}



100%{


opacity:0;


transform:

translate(var(--moveX),var(--moveY))

scale(1.4)

rotate(40deg);


}


}






#content-frame{


width:100%;


height:100vh;


border:none;


display:block;


}