body{
margin:0;
font-family:Papyrus,fantasy;
background:url("../giza.webp") no-repeat center center fixed;
background-size:cover;
color:#FFD700;
overflow-x:hidden;
transition:background 0.6s;
}

body.dark-mode{
background:url("../gizadark.png") no-repeat center center fixed;
background-size:cover;
}


/* MENU */

.egypt-menu{
background:rgba(212,175,55,0.95);
padding:10px 0;
}

.egypt-menu ul{
list-style:none;
display:flex;
justify-content:center;
gap:40px;
margin:0;
padding:0;
}

.egypt-menu ul li a{
text-decoration:none;
color:#000;
font-weight:bold;
}


/* HERO */

.hero{
position:relative;
text-align:center;
min-height:100vh;
}

.title{
position:absolute;
top:120px;
left:50%;
transform:translateX(-50%);
font-size:60px;
text-shadow:0 0 20px gold;
}


/* SUN / MOON */

.sun{
width:180px;
height:180px;
border-radius:50%;
margin:40px auto;
cursor:pointer;
background:radial-gradient(circle,#ffcc33,#ff9900);
box-shadow:0 0 80px #ffcc33;
transition:0.4s;
}

.sun.moon{
background:radial-gradient(circle,#bbb,#666);
box-shadow:0 0 40px #ccc;
}


/* STARS */

.starry::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
box-shadow:
100px 50px white,
200px 100px white,
300px 150px white,
400px 80px white,
500px 120px white,
600px 60px white,
700px 140px white,
800px 90px white,
900px 110px white;
pointer-events:none;
z-index:-1;
}


/* =========================
   MUMMY
========================= */
 
.mummy{
    position:absolute;
    bottom:0;
    left:10%;
    width:120px;
    height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    animation:mummyFloat 3s infinite ease-in-out;
}
 
@keyframes mummyFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-15px)}
    100%{transform:translateY(0)}
}
 
.head{
    width:90px;
    height:90px;
    background:#d8c8a8;
    border-radius:50%;
    position:relative;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
}
 
.eye{
    width:12px;
    height:12px;
    background:red;
    border-radius:50%;
    position:absolute;
    top:35px;
    animation:eyeGlow 2s infinite alternate;
}
 
.eye.left{left:22px;}
.eye.right{right:22px;}
 
@keyframes eyeGlow{
    from{box-shadow:0 0 5px red;}
    to{box-shadow:0 0 20px red;}
}
 
.mouth{
    width:30px;
    height:10px;
    background:black;
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    border-radius:5px;
}
 
.torso{
    width:80px;
    height:120px;
    margin-top:5px;
    border-radius:10px;
    background:repeating-linear-gradient(
        45deg,
        #cbb89b,
        #cbb89b 6px,
        #b7a381 6px,
        #b7a381 12px
    );
}
 
.arm{
    width:20px;
    height:100px;
    background:#cbb89b;
    position:absolute;
    top:100px;
    border-radius:10px;
    animation:armMove 2s infinite alternate;
}
 
.left-arm{left:-10px;}
.right-arm{right:-10px;}
 
@keyframes armMove{
    from{transform:rotate(-10deg)}
    to{transform:rotate(15deg)}
}
 
.legs{
    width:60px;
    height:90px;
    margin-top:5px;
    border-radius:10px;
    background:repeating-linear-gradient(
        45deg,
        #cbb89b,
        #cbb89b 6px,
        #b7a381 6px,
        #b7a381 12px
    );
}

/* =========================
   PHARAOH
========================= */
 
.pharaoh{
    position:absolute;
    bottom:0;
    right:10%;
    width:120px;
    height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    animation:pharaohFloat 4s infinite ease-in-out;
}
 
@keyframes pharaohFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}
 
.pharaoh-head{
    width:90px;
    height:100px;
    position:relative;
    background:gold;
    border-radius:50% 50% 40% 40%;
    overflow:hidden;
}
 
.stripes{
    position:absolute;
    width:100%;
    height:100%;
    background:repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        #0033A0 8px 16px
    );
}
 
.pharaoh-eye{
    width:12px;
    height:6px;
    background:black;
    border-radius:50%;
    position:absolute;
    top:40px;
}
 
.pharaoh-eye.left{left:22px;}
.pharaoh-eye.right{right:22px;}
 
.pharaoh-body{
    width:80px;
    height:140px;
    background:linear-gradient(gold,#c9a227);
    margin-top:5px;
    border-radius:10px;
}


/* PYRAMID LAYOUT */

.pyramid-container{
display:grid;
grid-template-columns:repeat(5,180px);
justify-content:center;
gap:60px;
margin:120px auto;
}

.pyramid-container .pyramid:nth-child(1){grid-column:3;}
.pyramid-container .pyramid:nth-child(2){grid-column:2;}
.pyramid-container .pyramid:nth-child(3){grid-column:4;}
.pyramid-container .pyramid:nth-child(4){grid-column:1;}
.pyramid-container .pyramid:nth-child(5){grid-column:3;}
.pyramid-container .pyramid:nth-child(6){grid-column:5;}

.pyramid{
position:relative;
width:0;
height:0;
border-left:90px solid transparent;
border-right:90px solid transparent;
border-bottom:150px solid #c2a878;
transition:0.3s;
}

.pyramid:hover{
transform:scale(1.1) translateY(-10px);
border-bottom-color:#f4a261;
}

.label{
position:absolute;
top:100px;
left:50%;
transform:translateX(-50%);
width:120px;
text-align:center;
font-weight:bold;
color:#FFD700;
}








.mummy, .pharaoh{
cursor:pointer;
}