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


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

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


/* ========================= */
/* BODY */
/* ========================= */

body {

    min-height: 100vh;

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

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(190, 225, 250, 0.8),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(255, 210, 225, 0.6),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #e8f6ff,
            #ffffff,
            #fce8f0
        );

    color: #35566e;

    overflow-x: hidden;
}


/* ========================= */
/* PAGE */
/* ========================= */

.page {

    min-height: 100vh;

    display: none;

    justify-content: center;

    align-items: center;

    padding: 25px;

    position: relative;
}


.page.active {

    display: flex;

    animation:
        pageAppear 0.8s ease;
}


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

.card {

    width: 100%;

    max-width: 520px;

    padding: 48px 32px;

    text-align: center;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.95
        );

    border-radius:
        35px;

    box-shadow:

        0 25px 70px

        rgba(
            67,
            132,
            177,
            0.15
        );

    position:
        relative;

    z-index:
        2;
}


/* ========================= */
/* SPARKLE */
/* ========================= */

.sparkle {

    font-size:
        35px;

    margin-bottom:
        12px;

    animation:
        sparkle 2s infinite;
}


.tiny-heading {

    text-transform:
        uppercase;

    letter-spacing:
        3px;

    font-size:
        11px;

    color:
        #6d9fbd;

    margin-bottom:
        18px;
}


/* ========================= */
/* HEADINGS */
/* ========================= */

h1 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        52px;

    line-height:
        1.05;

    font-weight:
        600;

    color:
        #326b91;

    margin-bottom:
        20px;
}


h2 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        29px;

    color:
        #326b91;

    margin:
        20px 0;
}


p {

    font-size:
        14px;

    line-height:
        1.9;

    color:
        #55768b;
}


.subtitle {

    margin-bottom:
        30px;
}


/* ========================= */
/* QUESTION BOX */
/* ========================= */

.question-box {

    margin-top:
        35px;

    padding:
        25px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,0.7),
            rgba(255,232,240,0.5)
        );

    border-radius:
        25px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.9
        );
}


/* ========================= */
/* BUTTONS */
/* ========================= */

button {

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

    cursor:
        pointer;

    border:
        none;

    transition:
        all 0.3s ease;
}


.buttons {

    display:
        flex;

    justify-content:
        center;

    gap:
        14px;
}


.yes-btn,
.no-btn,
.main-btn {

    padding:
        14px 28px;

    border-radius:
        50px;

    font-size:
        13px;

    font-weight:
        500;
}


.yes-btn,
.main-btn {

    background:

        linear-gradient(
            135deg,
            #65a8d0,
            #e39ab5
        );

    color:
        white;

    box-shadow:

        0 10px 25px

        rgba(
            190,
            125,
            155,
            0.25
        );
}


.yes-btn:hover,
.main-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 15px 30px

        rgba(
            190,
            125,
            155,
            0.35
        );
}


.no-btn {

    background:
        rgba(
            255,
            255,
            255,
            0.8
        );

    color:
        #5684a0;

    border:
        1px solid
        #c4dfef;
}


.no-btn:hover {

    transform:
        translateY(-4px);

    background:
        white;
}


.main-btn {

    margin-top:
        25px;
}


/* ========================= */
/* CUTE ICON */
/* ========================= */

.cute-icon {

    font-size:
        60px;

    margin-bottom:
        15px;
}


/* ========================= */
/* MINI NOTE */
/* ========================= */

.mini-note {

    margin-top:
        25px;

    padding:
        12px 20px;

    background:
        #fff0f5;

    border-radius:
        50px;

    font-size:
        12px;

    color:
        #b06d88;
}


/* ========================= */
/* QUOTES */
/* ========================= */

.quotes {

    margin:
        30px 0;
}


.quote-card {

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,0.7),
            rgba(255,235,242,0.55)
        );

    padding:
        20px;

    border-radius:
        22px;

    margin:
        15px 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.9
        );
}


.quote-icon {

    display:
        block;

    font-size:
        22px;

    color:
        #d887a5;

    margin-bottom:
        8px;
}


.quote-card p {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        22px;

    color:
        #3d7397;
}


.quote-card small {

    color:
        #7899ad;

    font-size:
        11px;
}


/* ========================= */
/* ENVELOPE */
/* ========================= */

.envelope {

    width:
        220px;

    height:
        145px;

    margin:
        35px auto;

    position:
        relative;

    cursor:
        pointer;

    transition:
        transform 0.3s ease;
}


.envelope:hover {

    transform:
        translateY(-5px);
}


.envelope-body {

    width:
        100%;

    height:
        100%;

    background:

        linear-gradient(
            135deg,
            #9cc9e3,
            #e8abc0
        );

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        45px;

    box-shadow:

        0 15px 30px

        rgba(
            150,
            120,
            150,
            0.2
        );

    position:
        relative;

    z-index:
        2;
}


.envelope-flap {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        0;

    border-left:
        110px solid transparent;

    border-right:
        110px solid transparent;

    border-top:
        80px solid #72add2;

    z-index:
        3;

    transform-origin:
        top;

    transition:
        transform 0.8s ease;
}


.envelope.open
.envelope-flap {

    transform:
        rotateX(180deg);
}


/* ========================= */
/* MESSAGE */
/* ========================= */

.message {

    display:
        none;

    margin-top:
        20px;

    animation:
        fadeIn 1s ease;
}


.message.show {

    display:
        block;
}


.message h2 {

    font-size:
        32px;
}


.message p {

    margin:
        15px 0;
}


.message-line {

    color:
        #d887a5;

    margin:
        20px 0;
}


.love-note {

    margin:
        20px 0;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        22px;

    color:
        #c56f91;
}


/* ========================= */
/* PHOTOS */
/* ========================= */

.photo-container {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        15px;

    margin:
        35px 0 20px;
}


.photo-frame {

    width:
        125px;

    height:
        155px;

    padding:
        7px;

    background:
        white;

    box-shadow:

        0 12px 25px

        rgba(
            67,
            137,
            184,
            0.2
        );

    transition:
        all 0.4s ease;
}


.photo-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.photo-one {

    transform:
        rotate(-6deg);
}


.photo-two {

    transform:
        translateY(-8px)
        rotate(3deg);
}


.photo-three {

    transform:
        rotate(-3deg);
}


.photo-frame:hover {

    transform:
        translateY(-10px)
        rotate(0deg)
        scale(1.06);

    z-index:
        5;
}


.photo-caption {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        18px;

    color:
        #6591aa;
}


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

.gift {

    font-size:
        70px;

    margin-bottom:
        15px;

    animation:
        bounce 2s infinite;
}


/* ========================= */
/* SONG */
/* ========================= */

.song-area {

    display:
        none;

    margin-top:
        35px;

    padding:
        28px 22px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,0.7),
            rgba(255,235,242,0.55)
        );

    border-radius:
        25px;

    animation:
        fadeIn 1s ease;
}


.song-area.show {

    display:
        block;
}


.music-icon {

    font-size:
        35px;
}


audio {

    width:
        100%;

    margin-top:
        20px;
}


/* ========================= */
/* FINAL MESSAGE */
/* ========================= */

.final-message {

    margin-top:
        30px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        25px;

    line-height:
        1.3;

    color:
        #6b91a8;
}


.final-message span {

    display:
        inline-block;

    margin-top:
        8px;

    font-size:
        34px;

    font-weight:
        600;

    color:
        #c56f91;
}


.final-hearts {

    margin-top:
        20px;

    color:
        #d887a5;

    letter-spacing:
        10px;
}


/* ========================= */
/* FLOATING ELEMENTS */
/* ========================= */

.floating-elements span {

    position:
        fixed;

    bottom:
        -50px;

    color:
        rgba(
            82,
            151,
            193,
            0.3
        );

    font-size:
        28px;

    animation:
        floatUp 12s linear infinite;

    z-index:
        1;
}


.floating-elements span:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}


.floating-elements span:nth-child(2) {
    left: 25%;
    animation-delay: 3s;
}


.floating-elements span:nth-child(3) {
    left: 45%;
    animation-delay: 6s;
}


.floating-elements span:nth-child(4) {
    left: 65%;
    animation-delay: 2s;
}


.floating-elements span:nth-child(5) {
    left: 80%;
    animation-delay: 5s;
}


.floating-elements span:nth-child(6) {
    left: 92%;
    animation-delay: 8s;
}


/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes pageAppear {

    from {

        opacity:
            0;

        transform:
            translateY(25px)
            scale(0.98);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(15px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes sparkle {

    0%,
    100% {

        transform:
            scale(1)
            rotate(0deg);

        opacity:
            0.7;
    }

    50% {

        transform:
            scale(1.2)
            rotate(10deg);

        opacity:
            1;
    }
}


@keyframes bounce {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-10px);
    }
}


@keyframes floatUp {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity:
            0;
    }

    20% {

        opacity:
            1;
    }

    100% {

        transform:
            translateY(-110vh)
            rotate(360deg);

        opacity:
            0;
    }
}


/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 600px) {

    .card {

        padding:
            40px 20px;
    }


    h1 {

        font-size:
            42px;
    }


    h2 {

        font-size:
            26px;
    }


    .photo-container {

        gap:
            8px;
    }


    .photo-frame {

        width:
            95px;

        height:
            125px;
    }


    .final-message span {

        font-size:
            29px;
    }

}