:root{

--bg:#fff8f8;
--pink:#ff4f87;
--lightPink:#ffd9e6;
--rose:#ff87ab;
--cream:#fffdf8;
--gold:#ffd369;
--text:#444;
--white:#ffffff;

--shadow:0 20px 60px rgba(0,0,0,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:linear-gradient(180deg,#fff8f8,#ffeef4,#fff9fc);

color:var(--text);

overflow-x:hidden;

}

/* ===========================
Scrollbar
=========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--pink);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#fff;

}

/* ===========================
Loader
=========================== */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#fff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:999999;

transition:.8s;

}

.loader-heart{

font-size:80px;

color:var(--pink);

animation:pulse 1s infinite;

}

#loader h2{

margin-top:20px;

font-weight:500;

color:#666;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.25);

}

100%{

transform:scale(1);

}

}

/* ===========================
Background Stars
=========================== */

.stars{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

pointer-events:none;

background-image:

radial-gradient(white 1px,transparent 1px);

background-size:45px 45px;

opacity:.35;

animation:starsMove 80s linear infinite;

z-index:-3;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-250px);

}

}

/* ===========================
Moon
=========================== */

.moon{

position:fixed;

top:60px;

right:80px;

width:170px;

height:170px;

border-radius:50%;

background:

radial-gradient(circle at 30% 30%,

#fff,

#fff6d5,

#ffe8aa);

box-shadow:

0 0 60px #fff,

0 0 120px rgba(255,255,255,.6);

z-index:-2;

animation:moonFloat 8s ease-in-out infinite;

}

@keyframes moonFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* ===========================
Floating Petals
=========================== */

#petals{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.petal{

position:absolute;

width:18px;

height:18px;

background:var(--rose);

border-radius:70% 30% 70% 30%;

opacity:.7;

animation:fall linear forwards;

}

@keyframes fall{

0%{

transform:

translateY(-100px)

rotate(0deg);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:

translateY(110vh)

translateX(120px)

rotate(720deg);

opacity:0;

}

}

/* ===========================
Music Button
=========================== */

#musicBtn{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border:none;

border-radius:50%;

background:var(--pink);

color:white;

font-size:22px;

cursor:pointer;

box-shadow:var(--shadow);

transition:.35s;

z-index:500;

}

#musicBtn:hover{

transform:scale(1.12);

background:#ff2d6f;

}

/* ===========================
Hero
=========================== */

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

padding:30px;

position:relative;

}

.glass{

width:min(900px,92%);

padding:70px;

border-radius:35px;

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

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

text-align:center;

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

}

.small-title{

letter-spacing:5px;

text-transform:uppercase;

font-size:14px;

color:#888;

margin-bottom:20px;

}

.hero h1{

font-family:"Great Vibes",cursive;

font-size:92px;

color:var(--pink);

margin-bottom:10px;

}

.hero h2{

font-size:50px;

font-weight:600;

margin-bottom:25px;

}

#typing{

font-size:21px;

line-height:1.9;

color:#555;

min-height:70px;

margin-bottom:40px;

}

/* ===========================
Buttons
=========================== */

button{

border:none;

cursor:pointer;

font-family:inherit;

}

#startBtn{

padding:18px 42px;

background:linear-gradient(45deg,#ff5c8a,#ff7ea6);

color:white;

border-radius:50px;

font-size:18px;

font-weight:600;

transition:.35s;

box-shadow:0 15px 35px rgba(255,79,135,.3);

}

#startBtn:hover{

transform:translateY(-5px);

box-shadow:0 20px 50px rgba(255,79,135,.4);

}

#startBtn i{

margin-left:12px;

}

/* ===========================
Scroll Indicator
=========================== */

.scroll{

margin-top:45px;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:15px;

color:#777;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}


/* ======================================
   PREMIUM BIRTHDAY WEBSITE
   CSS PART 2
====================================== */


/* ======================================
   STORY SECTION
====================================== */

.story{

    padding:140px 25px;

    position:relative;

}

.container{

    width:min(900px,92%);

    margin:auto;

}

.story-card{

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

    backdrop-filter:blur(15px);

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

    border-radius:30px;

    padding:55px 60px;

    margin-bottom:40px;

    text-align:center;

    box-shadow:0 20px 60px rgba(150,70,100,.08);

    transition:.4s;

}

.story-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(150,70,100,.14);

}

.story-card h2{

    font-size:42px;

    margin-bottom:25px;

}

.story-card p{

    font-size:20px;

    line-height:2;

    color:#666;

}


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

.gallery{

    padding:140px 30px;

    text-align:center;

}

.gallery > h2{

    font-family:"Great Vibes",cursive;

    font-size:65px;

    color:var(--pink);

    margin-bottom:70px;

}

.photos{

    width:min(1100px,95%);

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:45px;

}

.photo{

    width:230px;

    padding:14px 14px 55px;

    background:white;

    box-shadow:

        0 20px 40px rgba(0,0,0,.12);

    transition:.5s;

    position:relative;

}

.photo img{

    display:block;

    width:100%;

    height:270px;

    object-fit:cover;

}

.photo::after{

    content:"❤️";

    position:absolute;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    font-size:20px;

    opacity:.7;

}

.rotate-left{

    transform:rotate(-5deg);

}

.rotate-right{

    transform:rotate(5deg);

}

.photo:hover{

    transform:

        rotate(0deg)

        translateY(-20px)

        scale(1.05);

    z-index:5;

    box-shadow:

        0 30px 70px rgba(0,0,0,.2);

}


/* ======================================
   REASONS SECTION
====================================== */

.reasons{

    padding:150px 25px;

    text-align:center;

    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(255,220,230,.35),

            transparent

        );

}

.reasons > h2{

    font-family:"Great Vibes",cursive;

    font-size:65px;

    color:var(--pink);

    margin-bottom:55px;

}

.reason-box{

    width:min(650px,92%);

    min-height:250px;

    margin:auto;

    padding:55px 35px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(20px);

    border-radius:35px;

    box-shadow:

        0 25px 70px rgba(120,60,80,.1);

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

}

#reasonText{

    font-size:25px;

    line-height:1.8;

    color:#555;

    margin-bottom:35px;

    transition:.3s;

}

#reasonBtn{

    padding:15px 32px;

    border-radius:40px;

    background:#ff6d99;

    color:white;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

#reasonBtn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 12px 30px rgba(255,80,130,.3);

}


/* ======================================
   GIFT SECTION
====================================== */

.gift{

    min-height:800px;

    padding:140px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.gift h2{

    font-family:"Great Vibes",cursive;

    font-size:65px;

    color:var(--pink);

    margin-bottom:80px;

}


/* ======================================
   GIFT BOX
====================================== */

#giftBox{

    width:190px;

    height:170px;

    position:relative;

    cursor:pointer;

    margin-bottom:35px;

    transition:.5s;

}

#giftBox:hover{

    transform:translateY(-10px);

}


/* Box */

.box{

    position:absolute;

    bottom:0;

    left:10px;

    width:170px;

    height:125px;

    border-radius:5px 5px 15px 15px;

    background:

        linear-gradient(

            90deg,

            #ff6d98 0%,

            #ff477c 45%,

            #ff6d98 45%,

            #ff6d98 55%,

            #ff477c 55%,

            #ff477c 100%

        );

    box-shadow:

        0 25px 45px rgba(200,60,100,.25);

}


/* Lid */

.lid{

    position:absolute;

    z-index:2;

    top:25px;

    left:0;

    width:190px;

    height:45px;

    border-radius:8px;

    background:

        linear-gradient(

            90deg,

            #ff5b89 0%,

            #ff386f 44%,

            #ffd369 44%,

            #ffd369 56%,

            #ff386f 56%,

            #ff5b89 100%

        );

    box-shadow:

        0 10px 20px rgba(0,0,0,.15);

    transition:

        transform .8s ease,

        top .8s ease;

}


/* Gift Ribbon */

.box::before{

    content:"";

    position:absolute;

    left:75px;

    top:0;

    width:20px;

    height:100%;

    background:#ffd369;

}


/* Gift open state */

#giftBox.open .lid{

    transform:

        translateY(-90px)

        rotate(-12deg);

}


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

.gift-text{

    color:#888;

    font-size:16px;

    animation:

        giftHint 1.8s ease-in-out infinite;

}

@keyframes giftHint{

    0%,100%{

        opacity:.5;

    }

    50%{

        opacity:1;

    }

}


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

.letter{

    min-height:900px;

    padding:150px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(

            circle at center,

            rgba(255,220,230,.4),

            transparent 65%

        );

}

.paper{

    width:min(750px,92%);

    padding:75px 70px;

    background:#fffdf5;

    position:relative;

    box-shadow:

        0 30px 80px rgba(80,50,30,.15);

    border-radius:5px;

    transform:rotate(-1deg);

}

.paper::before{

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(200,160,100,.25);

    pointer-events:none;

}

.paper h2{

    font-family:"Great Vibes",cursive;

    font-size:55px;

    color:#c77b8e;

    margin-bottom:40px;

}

#letterText{

    font-family:"Great Vibes",cursive;

    font-size:29px;

    line-height:2;

    color:#68565b;

    min-height:200px;

}


/* ======================================
   CAKE SECTION
====================================== */

.cake-section{

    min-height:900px;

    padding:150px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.cake-section > h2{

    font-family:"Great Vibes",cursive;

    font-size:70px;

    color:var(--pink);

    margin-bottom:100px;

}


/* ======================================
   CAKE
====================================== */

.cake{

    position:relative;

    width:300px;

    height:220px;

    margin-bottom:60px;

}


/* Cake Body */

.cake-body{

    position:absolute;

    bottom:0;

    left:0;

    width:300px;

    height:150px;

    border-radius:

        20px

        20px

        35px

        35px;

    background:

        linear-gradient(

            180deg,

            #ffb6c9,

            #ff91af

        );

    box-shadow:

        0 30px 50px rgba(200,70,110,.2);

}


/* Cake Cream */

.cake-body::before{

    content:"";

    position:absolute;

    top:-25px;

    left:0;

    width:300px;

    height:55px;

    border-radius:50%;

    background:#fff5f7;

    box-shadow:

        0 10px 0 #ffd7e1;

}


/* Cream Drops */

.cake-body::after{

    content:"";

    position:absolute;

    top:-5px;

    left:35px;

    width:18px;

    height:35px;

    border-radius:

        0 0 20px 20px;

    background:#fff5f7;

    box-shadow:

        45px 5px 0 #fff5f7,

        90px -3px 0 #fff5f7,

        135px 4px 0 #fff5f7,

        180px -2px 0 #fff5f7,

        225px 4px 0 #fff5f7;

}


/* ======================================
   CANDLES
====================================== */

.candles{

    position:absolute;

    z-index:5;

    top:-80px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:35px;

}

.candle{

    width:18px;

    height:70px;

    border-radius:5px;

    background:

        repeating-linear-gradient(

            45deg,

            #fff,

            #fff 8px,

            #ff78a0 8px,

            #ff78a0 16px

        );

    position:relative;

}


/* Flame */

.flame{

    position:absolute;

    width:22px;

    height:32px;

    left:-2px;

    top:-30px;

    background:

        radial-gradient(

            ellipse at center bottom,

            #fff 5%,

            #ffd369 35%,

            #ff9b42 70%,

            transparent 71%

        );

    animation:

        flame 0.8s infinite alternate;

    transform-origin:center bottom;

}

@keyframes flame{

    from{

        transform:

            scale(.9)

            rotate(-3deg);

    }

    to{

        transform:

            scale(1.1)

            rotate(3deg);

    }

}


/* ======================================
   BLOW BUTTON
====================================== */

#blowBtn{

    padding:17px 35px;

    border-radius:50px;

    background:#ff628f;

    color:white;

    font-weight:600;

    font-size:17px;

    box-shadow:

        0 15px 35px rgba(255,80,130,.25);

    transition:.3s;

}

#blowBtn:hover{

    transform:translateY(-5px);

}


/* ======================================
   FINAL SECTION
====================================== */

.final{

    min-height:100vh;

    padding:100px 25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

        radial-gradient(

            circle at center,

            #30213c,

            #160f21 65%,

            #09070e

        );

    color:white;

    position:relative;

    overflow:hidden;

}

.final h1{

    font-family:"Great Vibes",cursive;

    font-size:110px;

    color:#ffd6e4;

    text-shadow:

        0 0 30px rgba(255,150,190,.5);

}

.final h2{

    font-size:55px;

    color:#ff91b2;

    margin-bottom:35px;

}

.final p{

    max-width:650px;

    font-size:19px;

    line-height:2;

    color:#e6dce4;

}

#fireworkBtn{

    margin-top:45px;

    padding:17px 40px;

    border-radius:50px;

    background:#ff6b99;

    color:white;

    font-size:18px;

    font-weight:600;

    box-shadow:

        0 0 30px rgba(255,80,140,.3);

    transition:.3s;

}

#fireworkBtn:hover{

    transform:scale(1.08);

    box-shadow:

        0 0 50px rgba(255,100,160,.6);

}


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

footer{

    padding:35px 20px;

    text-align:center;

    background:#100b17;

    color:#9e8e9e;

    font-size:14px;

}


/* ======================================
   RESPONSIVE DESIGN
====================================== */

@media(max-width:900px){

    .moon{

        width:120px;

        height:120px;

        right:30px;

        top:40px;

    }

    .glass{

        padding:55px 30px;

    }

    .hero h1{

        font-size:75px;

    }

    .hero h2{

        font-size:42px;

    }

    .final h1{

        font-size:80px;

    }

}


@media(max-width:600px){

    .moon{

        width:85px;

        height:85px;

        right:20px;

        top:25px;

    }

    .glass{

        padding:45px 20px;

        border-radius:25px;

    }

    .small-title{

        font-size:11px;

        letter-spacing:3px;

    }

    .hero h1{

        font-size:58px;

    }

    .hero h2{

        font-size:32px;

    }

    #typing{

        font-size:16px;

        line-height:1.7;

    }

    #startBtn{

        padding:15px 25px;

        font-size:15px;

    }

    .story{

        padding:90px 15px;

    }

    .story-card{

        padding:40px 25px;

    }

    .story-card p{

        font-size:17px;

        line-height:1.8;

    }

    .gallery{

        padding:90px 15px;

    }

    .gallery > h2,

    .reasons > h2,

    .gift h2{

        font-size:50px;

    }

    .photos{

        gap:35px;

    }

    .photo{

        width:210px;

    }

    .photo img{

        height:250px;

    }

    .reason-box{

        padding:40px 25px;

    }

    #reasonText{

        font-size:20px;

    }

    .gift{

        min-height:650px;

        padding:100px 20px;

    }

    .paper{

        padding:55px 30px;

    }

    .paper h2{

        font-size:45px;

    }

    #letterText{

        font-size:24px;

    }

    .cake-section{

        min-height:750px;

    }

    .cake-section > h2{

        font-size:55px;

        margin-bottom:80px;

    }

    .cake{

        transform:scale(.75);

        margin-top:-20px;

    }

    .final h1{

        font-size:62px;

    }

    .final h2{

        font-size:38px;

    }

    .final p{

        font-size:16px;

    }

    #musicBtn{

        width:52px;

        height:52px;

        right:15px;

        bottom:15px;

        font-size:18px;

    }

}


/* ======================================
   SELECTION
====================================== */

::selection{

    background:#ff8eac;

    color:white;

}


/* ======================================
   REMOVE IMAGE DRAG
====================================== */

img{

    user-select:none;

    -webkit-user-drag:none;

}


/* ======================================
   GENTLE PAGE FADE
====================================== */

body{

    animation:pageAppear 1.2s ease;

}

@keyframes pageAppear{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}