@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400&display=swap');


* {
    box-sizing:border-box;
}


body {

    margin:0;

    background:
    linear-gradient(
        180deg,
        #120b18,
        #25152b,
        #120b18
    );

    color:#fff;

    font-family:Inter, sans-serif;

    overflow-x:hidden;
}



#stars {

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

}



.star {

    position:absolute;

    width:3px;

    height:3px;

    background:white;

    border-radius:50%;

    opacity:.6;

    animation:twinkle 3s infinite alternate;

}



@keyframes twinkle {

    from {
        opacity:.2;
    }

    to {
        opacity:1;
    }

}



section {

    position:relative;

    z-index:1;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px 25px;

    text-align:center;

}



.hero h1 {

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:
    clamp(3rem,8vw,6rem);

    line-height:1;

}



.small {

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.7;

}



.subtitle {

    font-size:1.2rem;

}



button {

    margin-top:40px;

    padding:15px 35px;

    border-radius:40px;

    border:none;

    background:#fff;

    color:#6d304f;

    font-size:1rem;

    cursor:pointer;

}



.chapter span {

    color:#f7b6d2;

    letter-spacing:3px;

    text-transform:uppercase;

}



h2 {

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:3rem;

}



p {

    max-width:650px;

    line-height:1.8;

}



.timeline div {

    margin:30px;

}



.counter {

    margin-top:30px;

}


#days {

    font-size:5rem;

    font-family:
    "Cormorant Garamond",
    serif;

}



.gallery {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.gallery img {

    width:250px;

    height:250px;

    object-fit:cover;

    border-radius:20px;

}



.cards {

    display:grid;

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

    gap:20px;

    max-width:800px;

}



.cards div {

    padding:30px;

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

    border-radius:20px;

}



.paper {

    background:#fff8f0;

    color:#4a2433;

    padding:40px;

    border-radius:10px;

    max-width:700px;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:1.3rem;

}



.heart {

    font-size:5rem;

    animation:pulse 2s infinite;

}



@keyframes pulse {

    50% {
        transform:scale(1.2);
    }

}



.reveal {

    opacity:0;

    transform:translateY(50px);

    transition:
    1s ease;

}



.reveal.visible {

    opacity:1;

    transform:none;

}