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


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


:root {

    --pink: #d94f78;

    --light-pink: #ffe8ef;

    --dark: #302329;

    --gray: #776b70;

    --cream: #fffaf8;

}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 20% 20%,
            #ffe6ed 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 80%,
            #fbe5ed 0%,
            transparent 35%
        ),

        var(--cream);

    color: var(--dark);

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;

}


.background {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, .8),
            transparent 50%
        );

    pointer-events: none;

}


.experience {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px 15px;

}


.screen {

    display: none;

    width: min(700px, 94vw);

    min-height: 650px;

    padding: 70px 55px;

    border-radius: 40px;

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

    backdrop-filter: blur(20px);

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

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

    box-shadow:
        0 30px 100px
        rgba(115, 65, 80, .13);

    text-align: center;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    animation:
        appear .8s ease;

    position: relative;

    z-index: 2;

}


.screen.active {

    display: flex;

}


.top-label,
.small-heading {

    font-size: 11px;

    letter-spacing: 3px;

    color: #b27888;

    font-weight: 600;

    margin-bottom: 15px;

}


.name {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(80px, 15vw, 130px);

    font-weight: 500;

    line-height: .8;

    color: var(--pink);

    margin-bottom: 30px;

}


.line {

    width: 50px;

    height: 1px;

    background: var(--pink);

    margin-bottom: 35px;

}


.question,
.big-question {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(42px, 7vw, 68px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -1px;

}


.tiny-text,
.description {

    margin-top: 20px;

    max-width: 500px;

    color: var(--gray);

    line-height: 1.7;

    font-size: 15px;

}


.choices {

    width: 100%;

    max-width: 530px;

    margin-top: 35px;

    display: grid;

    gap: 12px;

}


.choices button {

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    padding: 17px;

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

    border: 1px solid #f1dbe2;

    border-radius: 18px;

    color: var(--dark);

    cursor: pointer;

    text-align: left;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.choices button:hover {

    transform: translateY(-4px);

    background: white;

    box-shadow:
        0 15px 35px
        rgba(150, 70, 95, .12);

}


.choices button > span {

    min-width: 34px;

    height: 34px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: var(--light-pink);

    color: var(--pink);

    font-weight: 600;

}


.choices strong {

    display: block;

    font-size: 15px;

}


.choices small {

    display: block;

    margin-top: 4px;

    color: #988a90;

    font-size: 12px;

}


.number {

    position: absolute;

    top: 30px;

    right: 40px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    color: #c49aa6;

}


.screen h2 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(45px, 7vw, 70px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -2px;

    margin-bottom: 20px;

}


.love-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--light-pink);

    color: var(--pink);

    font-size: 32px;

    margin-bottom: 25px;

}


.romantic-text {

    max-width: 500px;

    margin-top: 15px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;

    line-height: 1.35;

}


.romantic-text p {

    margin-bottom: 13px;

}


.highlight {

    color: var(--pink);

    font-weight: 600;

}


.main-button {

    margin-top: 35px;

    border: none;

    background: var(--pink);

    color: white;

    padding: 16px 30px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;

}


.main-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(217,79,120,.25);

}


.mission {

    width: 100%;

    max-width: 500px;

    margin-top: 25px;

    padding: 10px 25px;

    border-radius: 22px;

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

    border: 1px solid #f1dce2;

}


.mission div {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 14px 0;

    border-bottom: 1px solid #f1e4e8;

}


.mission div:last-child {

    border-bottom: none;

}


.mission span {

    color: var(--pink);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;

}


.mission p {

    color: var(--gray);

    font-size: 14px;

}


.clock {

    font-size: 50px;

    margin-bottom: 20px;

}


.time-options {

    display: grid;

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

    gap: 12px;

    width: 100%;

    max-width: 560px;

    margin-top: 35px;

}


.time-options button {

    border: 1px solid #f0dce3;

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

    padding: 25px 15px;

    border-radius: 20px;

    cursor: pointer;

    transition: .25s ease;

}


.time-options button:hover {

    transform: translateY(-5px);

    background: white;

    box-shadow:
        0 15px 35px
        rgba(150,70,95,.12);

}


.time-options span {

    display: block;

    font-size: 30px;

    margin-bottom: 12px;

}


.time-options strong {

    display: block;

    font-size: 14px;

}


.time-options small {

    display: block;

    margin-top: 5px;

    color: #998c91;

}


.letter {

    max-width: 520px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 23px;

    line-height: 1.4;

    color: #5e5056;

}


.letter p {

    margin-bottom: 17px;

}


.letter strong {

    color: var(--pink);

}


.final-line {

    color: var(--pink);

    font-weight: 600;

}


.final-screen {

    min-height: 680px;

}


.confetti {

    font-size: 35px;

    margin-bottom: 15px;

}


.big-heart {

    font-size: 65px;

    color: var(--pink);

    animation: heartbeat 1.7s infinite;

    margin: 5px 0 25px;

}


.date-card {

    width: 100%;

    max-width: 500px;

    border-radius: 25px;

    overflow: hidden;

    border: 1px solid #f1dce2;

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

}


.date-row {

    padding: 17px;

    border-bottom: 1px solid #f1e4e8;

}


.date-row:last-child {

    border-bottom: none;

}


.date-row small {

    display: block;

    font-size: 9px;

    letter-spacing: 2px;

    color: #b17d8c;

    margin-bottom: 5px;

}


.date-row strong {

    font-size: 15px;

}


.final-message {

    margin-top: 25px;

    color: var(--gray);

    line-height: 1.7;

    font-size: 15px;

}


.final-message strong {

    color: var(--pink);

}


.see-you {

    margin-top: 25px;

    color: var(--pink);

    font-weight: 600;

}


.floating-hearts {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;

}


.heart {

    position: absolute;

    bottom: -30px;

    color: #e8a9b9;

    opacity: .35;

    animation:
        floatUp 7s linear forwards;

}


@keyframes appear {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes floatUp {

    from {

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

        opacity: 0;

    }

    15% {

        opacity: .35;

    }

    to {

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

        opacity: 0;

    }

}


@keyframes heartbeat {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.12);

    }

}


@media(max-width:600px) {

    .experience {

        padding: 15px;

    }


    .screen {

        min-height: 620px;

        padding: 55px 22px;

        border-radius: 28px;

    }


    .name {

        font-size: 85px;

    }


    .question,
    .big-question {

        font-size: 43px;

    }


    .screen h2 {

        font-size: 48px;

    }


    .time-options {

        grid-template-columns: 1fr;

    }


    .time-options button {

        padding: 17px;

        display: grid;

        grid-template-columns: 45px 1fr;

        text-align: left;

        align-items: center;

    }


    .time-options span {

        grid-row: span 2;

        margin: 0;

    }


    .romantic-text {

        font-size: 21px;

    }


    .letter {

        font-size: 20px;

    }

}