Feb Challenge

/* Improved Streetlight */

.streetlight {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

}



.streetlight-pole {

    width: 12px;

    height: 250px;

    background: #3d3d3d;

    margin: 0 auto;

}



.streetlight-arm {

    width: 80px;

    height: 12px;

    background: #3d3d3d;

    position: relative;

    left: -34px;

}



.streetlight-lantern {

    width: 60px;

    height: 80px;

    background: #4a4a4a;

    border-radius: 10px;

    position: relative;

    left: -24px;

    display: flex;

    justify-content: center;

}



.streetlight-glow {

    width: 40px;

    height: 40px;

    background: radial-gradient(circle, 

        rgba(255, 215, 150, 0.8) 0%, 

        rgba(255, 190, 100, 0.4) 50%, 

        transparent 100%);

    filter: blur(15px);

    animation: light-flicker 2s infinite alternate;

}



/* Couple Figures */

.couple {

    position: absolute;

    bottom: 100px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 20px;

    z-index: 1;

    animation: float 3s ease-in-out infinite;

}



.person {

    width: 40px;

    height: 100px;

    position: relative;

}



.person:nth-child(1) {

    transform: rotate(5deg);

}



.person:nth-child(2) {

    transform: rotate(-5deg);

}



.person-body {

    width: 40px;

    height: 80px;

    background: #2c2c2c;

    border-radius: 20px;

    position: absolute;

    bottom: 0;

}



.person-head {

    width: 25px;

    height: 25px;

    background: #ffe4c4;

    border-radius: 50%;

    position: absolute;

    bottom: 80px;

    left: 50%;

    transform: translateX(-50%);

}



/* Snowfall container */

#snow-particles {

    position: absolute;

    width: 100%;

    height: 100%;

}



/* Animations */

@keyframes float {

    0%, 100% { transform: translateY(0) translateX(-50%); }

    50% { transform: translateY(-15px) translateX(-50%); }

}



@keyframes light-flicker {

    0% { opacity: 0.9; }

    100% { opacity: 1; }

}



@keyframes moon-glow {

    0% { opacity: 0.9; }

    100% { opacity: 1; }

}



/* Ground effect */

.ground {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 150px;

    background: linear-gradient(transparent, #ffffff33);

    backdrop-filter: blur(3px);

    z-index: 2;

}

// Add arm connection between people

const couple = document.querySelector('.couple');

const arm = document.createElement('div');

arm.style.position = 'absolute';

arm.style.width = '40px';

arm.style.height = '8px';

arm.style.background = '#2c2c2c';

arm.style.top = '60px';

arm.style.left = '50%';

arm.style.transform = 'translateX(-50%)';

arm.style.borderRadius = '4px';

couple.appendChild(arm);