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

body{

height:100vh;

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

overflow:hidden;

background:url("image/atul-pandey-JVnVeJibk6k-unsplash.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

position:relative;
}
/* floating hearts */

.hearts::before{

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

position:absolute;

top:-50px;
left:0;

width:100%;

font-size:30px;

animation:fall 15s linear infinite;

opacity:.25;
}

@keyframes fall{

from{
transform:translateY(-100px);
}

to{
transform:translateY(120vh);
}

}

.container{

width:90%;
max-width:700px;

text-align:center;

padding:60px;

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

backdrop-filter:blur(20px);

border-radius:30px;

box-shadow:
0 20px 50px rgba(0,0,0,.15);
}

h1{

font-size:3rem;

color:white;

margin-bottom:10px;

text-shadow:
0 0 20px rgba(255,255,255,.6);
}
.subtitle{

color:white;

font-size:1rem;

margin-bottom:20px;

opacity:.9;
}
#question{

font-size:1.2rem;

color:white;

margin-bottom:25px;
}

h2{

color:white;

font-size:2rem;

margin-bottom:40px;
}

.buttons{

position:relative;

height:200px;
}

.yes-btn{

border:none;

background:#ff4d8d;

color:white;

padding:18px 45px;

font-size:1.2rem;

border-radius:50px;

cursor:pointer;

transition:.4s;
}

.no-btn{

position:absolute;

left:60%;
top:0;

border:none;

background:#666;

color:white;

padding:18px 45px;

font-size:1.2rem;

border-radius:50px;

cursor:pointer;
}

.small-text{

margin-top:30px;

color:white;
opacity:.8;
}
body::before{

content:"";

position:absolute;

inset:0;

background:
rgba(0,0,0,.25);

backdrop-filter:blur(2px);
}
.love-card{

position:relative;
z-index:5;

width:90%;
max-width:650px;

padding:40px;

text-align:center;

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

backdrop-filter:blur(20px);

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

border-radius:35px;

box-shadow:
0 20px 50px rgba(0,0,0,.25);

animation:
floatCard 5s ease-in-out infinite;
}
.photo-box{

width:220px;
height:220px;

margin:auto;
margin-bottom:25px;

border-radius:25px;

overflow:hidden;

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

box-shadow:
0 10px 30px rgba(0,0,0,.25);
}

.photo-box img{

width:100%;
height:100%;

object-fit:cover;
}
@keyframes floatCard{

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

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

}
.buttons{
    position:relative;
    width:100%;
    height:250px;
}

.no-btn{
    position:absolute;
    left:60%;
    top:100px;
    transition:0.35s ease;
}

.yes-btn{
    position:absolute;
    left:20%;
    top:100px;
    transition:0.35s ease;
}
.loading-screen{

position:fixed;

top:0;
left:0;

width:100vw;
height:100vh;

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

background:
linear-gradient(
135deg,
#ff8fab,
#ffc2d1
);

z-index:99999;

color:white;

font-family:'Poppins',sans-serif;

text-align:center;
}

.loading-screen h1{

font-size:5rem;
margin-bottom:20px;

animation:pulse 1s infinite;
}

.loading-screen h2{

font-size:2.5rem;
}

.loading-screen p{

font-size:1.2rem;
margin-top:10px;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.2);
}

100%{
transform:scale(1);
}

}