*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}
 
body{
    background: #284d2a;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow-x: hidden;
}
 
.background{
    width: 100%;
    min-height: 100vh;
    height: 100%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 40px 0;
    z-index: 2;

    background:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
        url("jungle leaves background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    overflow: hidden; 
}

.groundback {
    position: absolute;
    bottom: -200px;
    left: 0;
    width: 100%;
    height: 400px; 
    z-index: 12;   
    
    background: url("bushess_baba.png");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.bushtop {
    position: absolute;
    bottom: 750px;
    left: 0;
    width: 100%;
    height: 400px; 
    z-index: 2;   

    background: url("top_bushes.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none; 
}





 
.scene{
    position:relative;
    width:1400px;
    max-width:96vw;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:5;
}
 


.kid{
    position:absolute;
    width:400px;

}
 
.kid-top-left{
    top:100px;
    left:220px;
    transform: rotate(10deg);
    z-index: 10;
}
 
.kid-bottom-right{
    bottom:120px;
    right:180px;
    z-index:10; 
    transform: rotate(-10deg);
}
 

.dino{
    position:absolute;
    z-index:11;
}
 
.trex{
    width:800px;
    left:-180px;
    bottom:-350px;
}
 
.triceratops{
    width:700px;
    right:-50px;
    bottom: -400px;
}

.jungle{
    width: 350px;
    right: 320px;
    bottom: 650px;
    transform: rotate(8deg);
}
 

 
.invitation-card{
    position:relative;
    z-index:9;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
 
.invitation-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:680px;
    max-width:100%;
    position:relative;
    padding:90px 60px;
    text-align:center;
 
    background-image:url("old_paper_scrolll-removebg-preview.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center;
}
 

 
.small-text{
    font-size:2.5rem;
    font-weight:bold;
    color:#4b6b4d;
}
 
.turning{
    margin-top:15px;
    color:#8a5b2b;
    font-size:2rem;
}
 
.age{
    font-size:6rem;
    color:#9dc27c;
    margin:10px 0;
    text-shadow:4px 4px #7d552f;
}
 
.join-text{
    font-size:1.4rem;
    color:#7d552f;
    margin:20px 0;
}
 
.birthday-name{
    font-size:3rem;
    color:#58794f;
}
 
.birthday-title{
    margin-top:10px;
    font-size:2rem;
    color:#7d552f;
}
 

 
.date-section{
    margin-top:40px;
    display:flex;
    justify-content:space-around;
    align-items:center;
    width:100%;
}
 
.month,
.time{
    font-size:1.4rem;
    font-weight:bold;
    color:#7d552f;
}
 
.day h1{
    font-size:5rem;
    color:#8b5d2d;
}
 

 
.location{
    margin-top:35px;
    font-size:1.3rem;
    color:#7d552f;
    font-weight:bold;
}
 

 
.dress-code{
    margin-top:50px;
}
 
.dress-code h3{
    color:#7d552f;
    margin-bottom:20px;
}
 
.colors{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}
 
.color{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
 
.egg{
    width:45px;
    height:60px;
    border-radius:50% 50% 45% 45%;
    border:2px solid #999;
}
 
.green{ background:#6fae59; }
.blue{ background:#68a7ff; }
.yellow{ background:#ffd84d; }
.orange{ background:#ff9a3d; }
.gray{ background:#d6d6d6; }
 

 
@media(max-width:768px){

    .background {
        padding: 10px 0;
        min-height: 100vh;
        align-items: center;  
    }

    .scene {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        height: 100vh;
        overflow: hidden; 
    }

   
    .invitation-card {
        width: 800px;
        z-index: 5; 
    }

    .invitation-content {
        width: 100%;
        max-width: 360px; 
        padding: 70px 30px; 
        background-size: 100% 100%;
    }

  
    .small-text { font-size: 1.3rem; }
    .turning { margin-top: 5px; font-size: 1rem; }
    .age { font-size: 3rem; margin: 2px 0; }
    .join-text { font-size: 0.8rem; margin: 10px 0; }
    .birthday-name { font-size: 1.8rem; }
    .birthday-title { font-size: 1.1rem; margin-top: 2px; }
    
    .date-section { margin-top: 15px; }
    .month, .time { font-size: 0.9rem; }
    .day h1 { font-size: 2.5rem; }
    
    .location { font-size: 0.8rem; margin-top: 15px; }
    .dress-code { margin-top: 20px; }
    .dress-code h3 { font-size: 0.9rem; margin-bottom: 10px; }
    
    .colors { gap: 10px; }
    .egg { width: 25px; height: 35px; }
    .color span { font-size: 0.7rem; }

    


    .kid-bottom-right {
        width: 200px;
        top: 120px;
        left: -40px;
        transform: rotate(20deg);
    }

    .kid-top-left {
        width: 250px;
        top: 420px;
        left: 220px;
        transform: rotate(-10deg);
        z-index: 16;
    }

   
    .dino {
        z-index: 11; 
    }

    .trex {
        width: 400px;    
        left: -230px;
        bottom: -80px;   
        z-index: 11;
    }

    .triceratops {
        width: 380px;
        left: 225px;      
        bottom: -100px;
        transform: rotate(10deg);
        z-index: 9;
    }

    

    .jungle {
        width: 250px;
        right: -10px;
        top: -10px;
        transform: rotate(0deg);
    }
    
    
    .groundback {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 300px; 
    z-index: 2;   
    
    background: url("bushess_baba.png");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none; 
}

.bushtop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px; 
    z-index: 3;   

    background: url("top_bushes.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none; 
}
}