*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
}


body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow-x:hidden;

    overflow-y:auto;

    padding:20px;

    background:
    linear-gradient(
        135deg,
        #ff416c,
        #ff4b2b,
        #ff758c,
        #ff7eb3
    );

    background-size:400% 400%;

    animation:bgMove 12s infinite alternate;

    position:relative;

}

}



/* Floating hearts background */

body::before{

    content:"❤️ ❤️ 💕 💖 ❤️ 💕 ❤️";

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    font-size:45px;

    opacity:.15;

    letter-spacing:80px;

    line-height:120px;

    animation:floatHearts 15s linear infinite;

}


/* Main card */

.container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:650px;

    padding:40px;

    margin:auto;

    text-align:center;
    
    
    border-radius:35px;


    background:

    rgba(255,255,255,0.15);


    backdrop-filter:blur(20px);


    border:1px solid rgba(255,255,255,.4);


    box-shadow:

    0 25px 60px rgba(0,0,0,.25);


    animation:appear 1.2s ease;

}


/* Heart */

.heart{

    font-size:100px;

    animation:heartbeat 1.2s infinite;

    margin-bottom:20px;

}


/* Heading */

h1{

    color:white;

    font-size:45px;

    font-weight:800;

    text-shadow:

    0 5px 20px rgba(0,0,0,.25);

    margin-bottom:25px;

}



/* Text */

p{

    color:white;

    font-size:21px;

    line-height:1.8;

    margin-bottom:35px;

}


/* Buttons */

.buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}


button{

    border:none;

    padding:18px 55px;

    border-radius:50px;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.4s;

}


.yes{

    background:white;

    color:#ff3366;

    box-shadow:

    0 10px 25px rgba(0,0,0,.2);

}


.yes:hover{

    transform:translateY(-8px) scale(1.08);

    background:#ff3366;

    color:white;

}



.no{

    background:rgba(255,255,255,.3);

    color:white;

    border:2px solid white;

}


.no:hover{

    transform:translateY(5px);

}



/* Celebration */

.celebrate{

    font-size:55px;

    margin-top:25px;

    animation:bounce 2s infinite;

}



/* Animations */


@keyframes heartbeat{

    50%{

        transform:scale(1.25);

    }

}



@keyframes bgMove{

    0%{

        background-position:left;

    }

    100%{

        background-position:right;

    }

}



@keyframes appear{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes floatHearts{

    from{

        transform:translateY(100vh);

    }

    to{

        transform:translateY(-120vh);

    }

}



@keyframes bounce{

    50%{

        transform:translateY(-15px);

    }

}



/* Mobile */

@media(max-width:600px){

    h1{

        font-size:32px;

    }


    p{

        font-size:18px;

    }


    .heart{

        font-size:75px;

    }


    button{

        width:100%;

    }

}

.couple-photo{

width:260px;

height:260px;

object-fit:cover;

border-radius:50%;

border:8px solid white;

box-shadow:

0 15px 40px rgba(0,0,0,.35);

margin-bottom:25px;

animation:photoAppear 1.5s ease;

}


@keyframes photoAppear{

from{

opacity:0;

transform:scale(.5) rotate(-10deg);

}


to{

opacity:1;

transform:scale(1) rotate(0);

}

}