body{

    margin:0;
    padding:0;

    background:#556B2F;

    color:#FFF8DC;

    font-family:Arial, Helvetica, sans-serif;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:100vh;

    overflow:hidden;

    transition:background 1s;

}

.container{
    text-align:center;
    padding:20px;
    width:min(900px,95vw);
}

.gif{

    width:min(300px,80vw);
    max-width:80%;

    display:block;
    margin:auto;

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

@keyframes float{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

h1{

    margin-top:20px;
    margin-bottom:30px;

    font-size:clamp(1.7rem,5vw,2.3rem);

    color:#FFF8DC;

    text-shadow:0 0 8px rgba(255,255,255,0.25);

}

#countdown{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.time-box{

    background:#101010;

    padding:18px 20px;

    border-radius:12px;

    min-width:85px;

    flex:1;

    max-width:120px;

    box-shadow:
        inset 0 0 12px #000,
        0 0 12px rgba(0,0,0,0.4);

}

.number{

    font-family:"Orbitron", monospace;

    color:#7CFC00;

    font-size:clamp(1.6rem,7vw,2.6rem);

    text-shadow:
        0 0 5px #7CFC00,
        0 0 10px #7CFC00;

}

.label{

    margin-top:10px;

    color:#DDD;

    font-size:0.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

#background-effects{

    position:fixed;
    width:100%;
    height:100%;

    left:0;
    top:0;

    pointer-events:none;

    overflow:hidden;

}

.falling{

    position:absolute;

    animation:fall linear infinite;

    opacity:0.85;

}

.heart{

    position:absolute;

    animation:rise linear forwards;

    opacity:0.9;

}

@keyframes fall{

    from{

        transform:translateY(-80px) rotate(0deg);

    }

    to{

        transform:translateY(110vh) rotate(360deg);

    }

}

@keyframes rise{

    from{

        transform:translateY(0);

        opacity:1;

    }

    to{

        transform:translateY(-120vh);

        opacity:0;

    }

}

#fireworks{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    pointer-events:none;

    display:none;
    
}

.birthday-title{

    margin-top:20px;

    font-size:2.4rem;

    color:#2E7D32;

    font-weight:bold;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(76,175,80,0.5);

}

#subtitle{

    margin-top:25px;

    font-size:1rem;

    color:#FDF5E6;

    opacity:0.95;

    font-style:italic;

    letter-spacing:0.5px;

}

.birthday-subtitle{

    margin-top:15px;

    font-size:1.1rem;

    color:#388E3C;

    font-style:italic;

}

@media (max-width:600px){

    .container{

        width:92%;

    }

    #countdown{

        gap:12px;

    }

    .time-box{

        padding:15px 10px;

    }

    .label{

        font-size:0.75rem;

    }

    #subtitle{

        font-size:0.9rem;

        padding:0 10px;

    }

}