/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:#fff;
    background:linear-gradient(-45deg,#ff7eb3,#ff758c,#a18cd1,#6dd5fa);
    background-size:400% 400%;
    animation:gradientBG 15s ease infinite;
    min-height:100vh;
}

/* =========================
   CANVAS
========================= */

#bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-3;
}

/* =========================
   HEART LAYER
========================= */

#hearts{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-2;
}

/* =========================
   TOP BAR
========================= */

.top-bar{
    position:fixed;
    top:20px;
    right:20px;
    z-index:999;
}

#music-btn{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:24px;

    background:rgba(255,255,255,.18);
    color:#fff;

    backdrop-filter:blur(15px);

    box-shadow:
    0 8px 25px rgba(0,0,0,.2);

    transition:.35s;
}

#music-btn:hover{
    transform:rotate(25deg) scale(1.1);
}

/* =========================
   CONTAINER
========================= */

.container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

/* =========================
   GLASS CARD
========================= */

.glass-card{

    width:95%;
    max-width:720px;

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

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:45px;

    text-align:center;

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

}

/* =========================
   TEXT
========================= */

.hello{

    font-family:"Dancing Script",cursive;

    font-size:48px;

    color:#fff;

    margin-bottom:10px;

}

.title{

    font-size:42px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:20px;

}

.desc{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

}

/* =========================
   COUNTER
========================= */

.counter{

    margin-top:35px;

}

.counter span{

    font-size:18px;

}

.counter h2{

    margin-top:10px;

    font-size:36px;

    color:#fff;

}

/* =========================
   LOVE BUTTON
========================= */

#loveBtn{

    margin-top:35px;

    border:none;

    cursor:pointer;

    padding:16px 45px;

    border-radius:40px;

    font-size:20px;

    font-weight:bold;

    color:#ff4d88;

    background:white;

    transition:.35s;

}

#loveBtn:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:
    0 10px 30px rgba(255,255,255,.35);

}

/* =========================
   GALLERY
========================= */

.gallery{

    width:92%;

    max-width:1200px;

    margin:80px auto;

    text-align:center;

}

.gallery h2{

    font-size:38px;

    margin-bottom:35px;

}

.slider{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.slider img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:22px;

    transition:.4s;

    box-shadow:
    0 12px 35px rgba(0,0,0,.25);

}

.slider img:hover{

    transform:scale(1.05);

}

/* =========================
   LETTER
========================= */

.letter{

    display:flex;

    justify-content:center;

    padding:70px 20px;

}

.letter-card{

    width:92%;

    max-width:760px;

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:45px;

    text-align:center;

}

.letter-card h2{

    margin-bottom:25px;

    font-size:38px;

}

.letter-card p{

    line-height:2;

    font-size:18px;
    
    cursor: pointer;
    transition: .8s;
    transform-style: preserve-3d;

}

/* =========================
   FOOTER
========================= */

footer{

    padding:35px;

    text-align:center;

    opacity:.9;

}

/* =========================
   SCROLL BAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#ff70a6;

    border-radius:50px;

}

/* =========================
   ANIMATION
========================= */

@keyframes gradientBG{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}