/* =========================
   ROOT VARIABELEN
========================= */

:root{
    --gold:#FFD700;
    --gold-dark:#c9a227;
    --gold-light:#fff4b0;
    --menu-gold:rgba(212,175,55,0.95);
    --card-bg:rgba(0,0,0,0.7);
}


/* =========================
   ALGEMEEN
========================= */

body{
    margin:0;
    font-family:Papyrus, fantasy;
    background:url("room6foto.webp") no-repeat center center fixed;
    background-size:cover;
    color:var(--gold);
    text-align:center;
    overflow-x:hidden;
}

/* zachte donkere overlay voor leesbaarheid */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:-1;
}


/* =========================
   MENU
========================= */

.egypt-menu{
    background:linear-gradient(90deg,#c9a227,#FFD700,#c9a227);
    padding:14px 0;
    box-shadow:0 5px 20px rgba(0,0,0,0.7);
}

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

.egypt-menu a{
    text-decoration:none;
    color:#3e2c14;
    font-weight:bold;
    font-size:18px;
    padding:6px 14px;
    transition:all 0.3s ease;
    border-radius:6px;
}

.egypt-menu a:hover{
    color:white;
    background:rgba(0,0,0,0.3);
    transform:translateY(-3px);
}


/* =========================
   TITELS
========================= */

h1{
    font-size:48px;
    text-shadow:
        0 0 10px var(--gold),
        0 0 30px var(--gold);
    margin-top:30px;
}


/* =========================
   ZON / MAAN
========================= */

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

.sun:hover{
    transform:scale(1.15);
}

.sun.moon{
    background:radial-gradient(circle,#a8a5a5,#727272);
    box-shadow:0 0 25px #cfcfcf;
}


/* =========================
   STERREN ANIMATIE
========================= */

.starry::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px);
    background-size:120px 120px;
    animation:starsMove 80s linear infinite;
    opacity:0.6;
    z-index:-1;
}

@keyframes starsMove{
    from{transform:translateY(0);}
    to{transform:translateY(-2000px);}
}


/* =========================
   TEAM CARDS
========================= */

#team-section{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:50px;
    margin:80px auto;
}

.team-member{
    background:var(--card-bg);
    padding:25px;
    border-radius:16px;
    width:230px;
    backdrop-filter:blur(6px);
    box-shadow:
        0 15px 40px rgba(0,0,0,0.7),
        inset 0 0 20px rgba(255,215,0,0.1);
    transition:all 0.35s ease;
    position:relative;
}

.team-member:hover{
    transform:translateY(-15px) scale(1.05);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.9),
        0 0 30px rgba(255,215,0,0.4);
}

/* gouden rand */

.team-member::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    border:2px solid rgba(255,215,0,0.25);
    pointer-events:none;
}

.team-member img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid var(--gold);
    margin-bottom:12px;
    box-shadow:0 0 20px rgba(255,215,0,0.6);
}

.team-member h3{
    margin:10px 0;
    font-size:22px;
}


/* =========================
   CONTACT FORM
========================= */

#form-section{
    margin:90px auto;
    width:420px;
}

form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* input velden */

input, textarea{
    padding:14px;
    border-radius:10px;
    border:none;
    font-size:15px;
    background:rgba(255,255,255,0.9);
    transition:0.25s;
}

input:focus, textarea:focus{
    outline:none;
    transform:scale(1.02);
    box-shadow:0 0 12px rgba(255,215,0,0.7);
}

/* knop */

button{
    padding:14px;
    border:none;
    border-radius:10px;
    font-weight:bold;
    font-size:16px;
    background:linear-gradient(45deg,#FFD700,#ffcc00);
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.5);
}

button:hover{
    transform:scale(1.08);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.6),
        0 0 15px var(--gold);
}


/* =========================
   CONFIRMATION
========================= */

#confirmation{
    margin-top:30px;
    background:rgba(0,0,0,0.7);
    padding:25px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.8);
}


/* =========================
   HIDDEN
========================= */

.hidden{
    display:none;
}


/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    #team-section{
        gap:30px;
    }

    #form-section{
        width:90%;
    }

    h1{
        font-size:34px;
    }

}