body{
    margin:0;
    background:linear-gradient(135deg,#ffd6e7,#ffeef5);
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:"Yu Gothic UI",sans-serif;
}

.container{
    background:white;
    padding:50px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.15);

    position:relative;
    z-index:1;
}

h1{
    font-size:70px;
    margin-bottom:0;
}

h2{
    color:#ff4d88;
    margin-top:10px;
}

p{
    line-height:1.8;
    font-size:18px;
}

button{
    margin-top:20px;
    padding:15px 50px;
    font-size:20px;
    border:none;
    border-radius:999px;
    background:#ff4d88;
    color:white;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    transform:scale(1.08);
    background:#ff77aa;
}

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}

#noBtn{

    position:relative;

}
.choice-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:20px;

}

.choice{

    background:#fff;

    color:#ff4d88;

    border:2px solid #ff4d88;

    border-radius:15px;

    padding:15px;

    font-size:18px;

}

.choice.selected{

    background:#ff4d88;

    color:white;

}
.container{
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
button:active{

    transform:scale(0.95);

}
#confetti{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
}
#hearts{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:  0;
}

.heart{
    position:absolute;
    animation:floatUp 13s linear forwards;
}

@keyframes floatUp{
    from{
        transform:translateY(0);
        opacity:1;
    }

    to{
        transform:translateY(-2500px);
        opacity:0;
    }
}