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

body {
    font-family: 'Cabin', sans-serif;
    /* Blue sky background */
    background: #64b5f6; /* Solid blue background */
    color: #4a3520; /* Dark brown for text */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-x: hidden;
    position: relative;
}

/* Add animated clouds */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* White clouds */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600"><path d="M100,100 C150,70 200,70 250,100 C270,70 320,70 340,100 C360,70 410,70 430,100 L430,120 L100,120 Z" fill="white" opacity="0.8"/><path d="M500,150 C550,120 600,120 650,150 C670,120 720,120 740,150 C760,120 810,120 830,150 L830,170 L500,170 Z" fill="white" opacity="0.8"/><path d="M900,80 C950,50 1000,50 1050,80 C1070,50 1120,50 1140,80 C1160,50 1210,50 1230,80 L1230,100 L900,100 Z" fill="white" opacity="0.8"/><path d="M300,200 C350,170 400,170 450,200 C470,170 520,170 540,200 C560,170 610,170 630,200 L630,220 L300,220 Z" fill="white" opacity="0.7"/><path d="M700,250 C750,220 800,220 850,250 C870,220 920,220 940,250 C960,220 1010,220 1030,250 L1030,270 L700,270 Z" fill="white" opacity="0.7"/></svg>'),
        /* Mountains */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="300" viewBox="0 0 1200 300"><path d="M0,300 L0,200 L100,100 L200,180 L300,80 L400,200 L500,150 L600,220 L700,100 L800,180 L900,120 L1000,200 L1100,150 L1200,200 L1200,300 Z" fill="%23546E7A" opacity="0.7"/><path d="M0,300 L0,220 L50,180 L100,200 L150,150 L200,220 L250,180 L300,220 L350,150 L400,220 L450,180 L500,220 L550,150 L600,220 L650,180 L700,220 L750,150 L800,220 L850,180 L900,220 L950,150 L1000,220 L1050,180 L1100,220 L1150,150 L1200,220 L1200,300 Z" fill="%23455A64" opacity="0.8"/></svg>'),
        /* Pine trees forest with proper tops */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="200" viewBox="0 0 1200 200"><path d="M50,200 L50,180 L30,180 L50,160 L30,160 L50,140 L30,140 L50,120 L30,120 L50,100 L70,100 L90,120 L70,120 L90,140 L70,140 L90,160 L70,160 L90,180 L70,180 L70,200 Z" fill="%23388E3C"/><ellipse cx="50" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M150,200 L150,180 L130,180 L150,160 L130,160 L150,140 L130,140 L150,120 L130,120 L150,100 L170,100 L190,120 L170,120 L190,140 L170,140 L190,160 L170,160 L190,180 L170,180 L170,200 Z" fill="%232E7D32"/><ellipse cx="150" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M250,200 L250,180 L230,180 L250,160 L230,160 L250,140 L230,140 L250,120 L230,120 L250,100 L270,100 L290,120 L270,120 L290,140 L270,140 L290,160 L270,160 L290,180 L270,180 L270,200 Z" fill="%23388E3C"/><ellipse cx="250" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M350,200 L350,180 L330,180 L350,160 L330,160 L350,140 L330,140 L350,120 L330,120 L350,100 L370,100 L390,120 L370,120 L390,140 L370,140 L390,160 L370,160 L390,180 L370,180 L370,200 Z" fill="%232E7D32"/><ellipse cx="350" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M450,200 L450,180 L430,180 L450,160 L430,160 L450,140 L430,140 L450,120 L430,120 L450,100 L470,100 L490,120 L470,120 L490,140 L470,140 L490,160 L470,160 L490,180 L470,180 L470,200 Z" fill="%23388E3C"/><ellipse cx="450" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M550,200 L550,180 L530,180 L550,160 L530,160 L550,140 L530,140 L550,120 L530,120 L550,100 L570,100 L590,120 L570,120 L590,140 L570,140 L590,160 L570,160 L590,180 L570,180 L570,200 Z" fill="%232E7D32"/><ellipse cx="550" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M650,200 L650,180 L630,180 L650,160 L630,160 L650,140 L630,140 L650,120 L630,120 L650,100 L670,100 L690,120 L670,120 L690,140 L670,140 L690,160 L670,160 L690,180 L670,180 L670,200 Z" fill="%23388E3C"/><ellipse cx="650" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M750,200 L750,180 L730,180 L750,160 L730,160 L750,140 L730,140 L750,120 L730,120 L750,100 L770,100 L790,120 L770,120 L790,140 L770,140 L790,160 L770,160 L790,180 L770,180 L770,200 Z" fill="%232E7D32"/><ellipse cx="750" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M850,200 L850,180 L830,180 L850,160 L830,160 L850,140 L830,140 L850,120 L830,120 L850,100 L870,100 L890,120 L870,120 L890,140 L870,140 L890,160 L870,160 L890,180 L870,180 L870,200 Z" fill="%23388E3C"/><ellipse cx="850" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M950,200 L950,180 L930,180 L950,160 L930,160 L950,140 L930,140 L950,120 L930,120 L950,100 L970,100 L990,120 L970,120 L990,140 L970,140 L990,160 L970,160 L990,180 L970,180 L970,200 Z" fill="%232E7D32"/><ellipse cx="950" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M1050,200 L1050,180 L1030,180 L1050,160 L1030,160 L1050,140 L1030,140 L1050,120 L1030,120 L1050,100 L1070,100 L1090,120 L1070,120 L1090,140 L1070,140 L1090,160 L1070,160 L1090,180 L1070,180 L1070,200 Z" fill="%23388E3C"/><ellipse cx="1050" cy="100" rx="20" ry="10" fill="%2343A047"/><path d="M1150,200 L1150,180 L1130,180 L1150,160 L1130,160 L1150,140 L1130,140 L1150,120 L1130,120 L1150,100 L1170,100 L1190,120 L1170,120 L1190,140 L1170,140 L1190,160 L1170,160 L1190,180 L1170,180 L1170,200 Z" fill="%232E7D32"/><ellipse cx="1150" cy="100" rx="20" ry="10" fill="%2343A047"/></svg>'),
        /* Lake */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="100" viewBox="0 0 1200 100"><path d="M0,100 L0,50 C50,40 100,60 150,50 C200,40 250,60 300,50 C350,40 400,60 450,50 C500,40 550,60 600,50 C650,40 700,60 750,50 C800,40 850,60 900,50 C950,40 1000,60 1050,50 C1100,40 1150,60 1200,50 L1200,100 Z" fill="%234FC3F7" opacity="0.7"/><path d="M0,100 L0,60 C50,55 100,65 150,60 C200,55 250,65 300,60 C350,55 400,65 450,60 C500,55 550,65 600,60 C650,55 700,65 750,60 C800,55 850,65 900,60 C950,55 1000,65 1050,60 C1100,55 1150,65 1200,60 L1200,100 Z" fill="%2329B6F6" opacity="0.5"/></svg>'),
        /* Camping tents */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="150" viewBox="0 0 1200 150"><path d="M100,150 L150,80 L200,150 Z" fill="%23FF5722" stroke="%23E64A19" stroke-width="2"/><path d="M120,150 L150,100 L180,150 Z" fill="%23FFCCBC" stroke="%23E64A19" stroke-width="1"/><path d="M300,150 L350,70 L400,150 Z" fill="%239C27B0" stroke="%237B1FA2" stroke-width="2"/><path d="M320,150 L350,90 L380,150 Z" fill="%23E1BEE7" stroke="%237B1FA2" stroke-width="1"/><path d="M500,150 L550,60 L600,150 Z" fill="%233F51B5" stroke="%23303F9F" stroke-width="2"/><path d="M520,150 L550,80 L580,150 Z" fill="%23C5CAE9" stroke="%23303F9F" stroke-width="1"/><path d="M700,150 L750,75 L800,150 Z" fill="%234CAF50" stroke="%23388E3C" stroke-width="2"/><path d="M720,150 L750,95 L780,150 Z" fill="%23C8E6C9" stroke="%23388E3C" stroke-width="1"/><path d="M900,150 L950,65 L1000,150 Z" fill="%23FFC107" stroke="%23FFA000" stroke-width="2"/><path d="M920,150 L950,85 L980,150 Z" fill="%23FFECB3" stroke="%23FFA000" stroke-width="1"/></svg>');
    background-position: 0 0, bottom center, bottom center, bottom center, bottom center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% auto, 100% auto, 100% auto, 100% auto;
    z-index: -1;
    pointer-events: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    position: relative;
    z-index: 10; /* Ensure it's above the campfire scenes */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Invitation Container */
.invitation-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Invitation Styles */
.invitation {
    width: 90%;
    max-width: 550px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
}

.invitation img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

/* Bottom Scene with Campfire and Kids */
.bottom-scene {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Campfire Styles */
.campfire {
    position: relative;
    width: 100px;
    height: 80px;
    margin: 0 auto;
    z-index: 6;
}

.log {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background-color: #795548; /* Brown */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.flames {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
}

.flame {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 60px;
    border-radius: 50% 50% 20% 20%;
    transform-origin: bottom;
}

.flame1 {
    left: 15px;
    background: linear-gradient(to top, #ff4500, #ffa500);
    animation: flicker 1.5s infinite alternate;
    z-index: 3;
}

.flame2 {
    left: 5px;
    height: 45px;
    background: linear-gradient(to top, #ff6600, #ffcc00);
    animation: flicker 2s infinite alternate-reverse;
    z-index: 2;
}

.flame3 {
    left: 25px;
    height: 50px;
    background: linear-gradient(to top, #ff4500, #ff8c00);
    animation: flicker 1.8s infinite alternate;
    z-index: 1;
}

@keyframes flicker {
    0%, 100% {
        transform: scaleY(1) scaleX(1);
        opacity: 0.8;
    }
    25% {
        transform: scaleY(1.1) scaleX(0.9);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.95) scaleX(1.05);
        opacity: 0.9;
    }
    75% {
        transform: scaleY(1.05) scaleX(0.95);
        opacity: 0.95;
    }
}

/* Kid Styles - positioned beside the fire */
.kid {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    animation: kidBounce 3s infinite alternate;
    z-index: 6;
}

/* Kid silhouettes with scout outfits - positioned on both sides of the fire */
.kid1 {
    left: calc(50% - 180px);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%23228B22"/><rect x="10" y="30" width="20" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%23228B22"/></svg>');
    animation-delay: 0.5s;
}

.kid2 {
    left: calc(50% - 140px);
    /* Pink outfit */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%23FF69B4"/><rect x="5" y="30" width="30" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%23FF69B4"/></svg>');
    animation-delay: 1s;
}

.kid3 {
    left: calc(50% - 100px);
    /* Purple outfit */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%239370DB"/><rect x="10" y="35" width="20" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%239370DB"/></svg>');
    animation-delay: 1.5s;
}

.kid4 {
    right: calc(50% - 180px);
    /* Purple outfit */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%239370DB"/><rect x="10" y="30" width="20" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%239370DB"/></svg>');
    animation-delay: 0.7s;
}

.kid5 {
    right: calc(50% - 140px);
    /* Pink outfit */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%23FF69B4"/><rect x="5" y="30" width="30" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%23FF69B4"/></svg>');
    animation-delay: 1.2s;
}

.kid6 {
    right: calc(50% - 100px);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="15" r="10" fill="%23333"/><rect x="15" y="25" width="10" height="20" fill="%23228B22"/><rect x="10" y="35" width="20" height="5" fill="%23A0522D"/><rect x="15" y="45" width="4" height="15" fill="%23333"/><rect x="21" y="45" width="4" height="15" fill="%23333"/><rect x="15" y="25" width="10" height="5" fill="%23FFD700"/><circle cx="16" cy="27" r="1" fill="%23333"/><circle cx="24" cy="27" r="1" fill="%23333"/><rect x="18" y="20" width="4" height="5" fill="%23228B22"/></svg>');
    animation-delay: 1.7s;
}

@keyframes kidBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Add cloud animation */
body {
    animation: cloudMove 60s linear infinite;
}

@keyframes cloudMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .invitation {
        width: 85%;
    }
    
    .kid1, .kid2, .kid3, .kid4, .kid5, .kid6 {
        transform: scale(0.8);
    }
    
    .kid1 { left: calc(50% - 150px); }
    .kid2 { left: calc(50% - 110px); }
    .kid3 { left: calc(50% - 70px); }
    .kid4 { right: calc(50% - 150px); }
    .kid5 { right: calc(50% - 110px); }
    .kid6 { right: calc(50% - 70px); }
}

@media (max-width: 480px) {
    .invitation {
        width: 80%;
    }
    
    body {
        padding: 10px;
    }
    
    .kid1, .kid6 {
        display: none; /* Hide the outermost kids on small screens */
    }
    
    .kid2 { left: calc(50% - 90px); }
    .kid3 { left: calc(50% - 50px); }
    .kid4 { right: calc(50% - 90px); }
    .kid5 { right: calc(50% - 50px); }
}

/* Add a yellow/orange sun */
.container::after {
    content: '';
    position: fixed;
    top: 40px;
    right: 80px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, 
        rgba(255,255,0,1) 0%, 
        rgba(255,215,0,0.9) 30%, 
        rgba(255,165,0,0.8) 60%, 
        rgba(255,140,0,0.6) 80%, 
        rgba(255,140,0,0) 100%);
    border-radius: 50%;
    z-index: -1;
    animation: pulseSun 5s infinite alternate;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
}

@keyframes pulseSun {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Add stars for night camping feel */
.star {
    position: fixed;
    width: 2px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: -1;
    animation: twinkle 3s infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.5);
    }
}

/* Add some additional camping-themed decorative elements */
.container::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 50" preserveAspectRatio="none"><path d="M0,50 L0,30 C50,35 100,20 150,30 C200,40 250,25 300,30 C350,35 400,20 450,30 C500,40 550,25 600,30 C650,35 700,20 750,30 C800,40 850,25 900,30 C950,35 1000,30 1000,30 L1000,50 Z" fill="%2327ae60" opacity="0.8"/></svg>');
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}