/* =========================================
   PALETTE
========================================= */

:root {
    --burgundy: #722F3E;
    --deep-burgundy: #5A2432;

    --dusty-rose: #B97883;
    --baby-pink: #F3C6CF;
    --soft-pink: #E8AAB7;

    --olive: #7A8060;
    --light-olive: #A5A887;

    --ivory: #FFF7F0;
    --warm-cream: #F7EDE5;

    --mocha: #8B6F63;
    --text: #4A3034;
    --white: #FFFFFF;
    --gold: #C6A15B;

    --shadow: rgba(90, 36, 50, 0.14);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ivory);
    color: var(--text);
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

button {
    font-family: inherit;
}


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

h1,
h2,
h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    min-height: 78px;
    padding: 0 8%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(255, 247, 240, 0.95);
    border-bottom: 1px solid #ead2d3;

    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter: blur(10px);
}

.logo {
    text-decoration: none;
    color: var(--burgundy);

    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
}

.music-button {
    border: 1px solid var(--dusty-rose);
    background: var(--white);
    color: var(--burgundy);

    padding: 10px 18px;
    border-radius: 30px;

    cursor: pointer;
    transition: 0.3s;
}

.music-button:hover {
    background: var(--baby-pink);
    transform: translateY(-2px);
}


/* =========================================
   HERO
========================================= */

.hero {
    min-height: 800px;
    padding: 80px 8%;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 30px;

    background:
        radial-gradient(
            circle at 75% 45%,
            #f3c6cf 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            #dfe2ce 0%,
            transparent 28%
        ),
        var(--ivory);
}


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

.hero-text {
    max-width: 580px;
}

.small-heading {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--burgundy);
    font-weight: 700;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(70px, 8vw, 110px);
    line-height: 0.82;

    color: var(--deep-burgundy);
    margin-bottom: 35px;
}

.hero h1 span {
    display: block;
    color: var(--dusty-rose);
    font-style: italic;
}

.description {
    max-width: 490px;

    color: var(--mocha);
    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 30px;
}


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

.main-button {
    border: none;

    background: var(--burgundy);
    color: white;

    padding: 15px 25px;
    border-radius: 50px;

    font-weight: 600;
    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 12px 25px rgba(114, 47, 62, 0.22);

    transition: 0.3s;
}

.main-button span {
    margin-left: 8px;
    font-size: 18px;
}

.main-button:hover {
    background: var(--deep-burgundy);

    transform: translateY(-3px);

    box-shadow:
        0 17px 30px rgba(114, 47, 62, 0.27);
}

.tiny-text {
    margin-top: 20px;

    color: #A78A82;

    font-size: 12px;
    font-style: italic;
}


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

.envelope-area {
    min-height: 540px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.glow {
    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #f3c6cf 0%,
            #f7dfe2 35%,
            transparent 70%
        );

    position: absolute;

    filter: blur(8px);
    opacity: 0.85;
}


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

.envelope {
    width: 460px;
    height: 315px;

    position: relative;

    transform: rotate(-3deg);

    transition: 0.5s;

    z-index: 3;

    cursor: pointer;

    filter:
        drop-shadow(
            0 30px 28px
            rgba(90, 36, 50, 0.18)
        );
}

.envelope:hover {
    transform: rotate(0deg) scale(1.04);
}

.envelope-back {
    position: absolute;
    inset: 0;

    background: var(--burgundy);

    border-radius: 12px;

    z-index: 1;
}


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

.letter {
    position: absolute;

    width: 350px;
    height: 260px;

    background: var(--ivory);
    color: var(--deep-burgundy);

    left: 55px;
    top: -75px;

    padding: 38px;

    text-align: center;

    border-radius: 5px;

    box-shadow:
        0 15px 30px rgba(90, 36, 50, 0.16);

    z-index: 2;

    transition: 0.5s;
}

.envelope:hover .letter {
    transform: translateY(-35px);
}

.letter span {
    display: block;

    font-size: 10px;
    letter-spacing: 3px;

    color: var(--burgundy);

    margin-bottom: 20px;
}

.letter strong {
    display: block;

    font-family: "Cormorant Garamond", serif;

    font-size: 45px;
    line-height: 0.92;
}

.letter small {
    display: block;

    color: var(--dusty-rose);

    font-size: 28px;

    margin-top: 20px;
}


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

.envelope-front {
    position: absolute;
    inset: 0;

    background: var(--dusty-rose);

    clip-path:
        polygon(
            0 0,
            50% 55%,
            100% 0,
            100% 100%,
            0 100%
        );

    border-radius: 12px;

    z-index: 3;
}


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

.envelope-flap {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 70%;

    background: var(--baby-pink);

    clip-path:
        polygon(
            0 0,
            50% 65%,
            100% 0
        );

    z-index: 4;
}


/* =========================================
   WAX SEAL
========================================= */

.wax-seal {
    position: absolute;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    background: var(--burgundy);
    color: var(--baby-pink);

    display: grid;
    place-items: center;

    font-size: 29px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 6;

    box-shadow:
        0 5px 15px rgba(90, 36, 50, 0.25),
        inset 0 0 0 4px #873d4f;

    transition: 0.3s;
}

.envelope:hover .wax-seal {
    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================
   FLOATING DECORATIONS
========================================= */

.floating-heart,
.floating-star,
.floating-leaf {
    position: absolute;

    z-index: 5;

    animation:
        float 4s ease-in-out infinite;
}

.floating-heart {
    color: var(--dusty-rose);
}

.floating-star {
    color: var(--gold);
}

.floating-leaf {
    color: var(--olive);
    font-size: 28px;
}

.heart-one {
    top: 70px;
    left: 10%;
    font-size: 30px;
}

.heart-two {
    bottom: 80px;
    right: 12%;
    font-size: 24px;
    animation-delay: 1s;
}

.star-one {
    top: 100px;
    right: 10%;
    font-size: 25px;
    animation-delay: 0.5s;
}

.star-two {
    bottom: 60px;
    left: 10%;
    font-size: 18px;
    animation-delay: 1.5s;
}

.leaf-one {
    top: 30%;
    left: 5%;
    transform: rotate(-30deg);
    animation-delay: 0.7s;
}

.leaf-two {
    bottom: 25%;
    right: 5%;
    transform: rotate(30deg);
    animation-delay: 1.2s;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================
   THANK YOU SECTION
========================================= */

.thank-section {
    padding: 120px 8%;
    background: var(--warm-cream);
}

.section-title {
    max-width: 720px;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 68px;
    line-height: 0.9;

    color: var(--deep-burgundy);

    margin-bottom: 20px;
}

.section-title h2 span {
    color: var(--dusty-rose);
    font-style: italic;
}

.section-title > p:last-child {
    color: var(--mocha);
    line-height: 1.7;
}


/* =========================================
   THANK YOU CARDS
========================================= */

.cards-container {
    display: grid;

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

    gap: 20px;
}

.thank-card {
    min-height: 350px;

    border: none;
    border-radius: 22px;

    padding: 30px;

    text-align: left;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transition:
        transform 0.35s,
        box-shadow 0.35s;
}

.thank-card:hover {
    transform:
        translateY(-9px)
        rotate(-1deg);

    box-shadow:
        0 20px 35px var(--shadow);
}


/* BURGUNDY CARD */

.burgundy-card {
    background: var(--burgundy);
    color: white;
}

.burgundy-card small,
.burgundy-card p {
    color: #f6dce1;
}

.burgundy-card strong {
    color: var(--baby-pink);
}


/* ROSE CARD */

.rose-card {
    background: var(--dusty-rose);
    color: white;
}

.rose-card small,
.rose-card p {
    color: #fff0f2;
}

.rose-card strong {
    color: var(--ivory);
}


/* OLIVE CARD */

.olive-card {
    background: var(--olive);
    color: white;
}

.olive-card small,
.olive-card p {
    color: #edf0df;
}

.olive-card strong {
    color: var(--baby-pink);
}


/* PINK CARD */

.pink-card {
    background: var(--baby-pink);
    color: var(--deep-burgundy);
}

.pink-card small,
.pink-card p {
    color: #76535d;
}

.pink-card strong {
    color: var(--burgundy);
}


/* CARD ICON */

.card-icon {
    width: 56px;
    height: 56px;

    border-radius: 50%;

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

    display: grid;
    place-items: center;

    font-size: 25px;

    margin-bottom: auto;
}

.thank-card small {
    font-size: 9px;
    letter-spacing: 2px;

    margin-bottom: 15px;
}

.thank-card h3 {
    font-size: 39px;
    line-height: 1;

    margin-bottom: 12px;
}

.thank-card p {
    line-height: 1.5;
    margin-bottom: 30px;
}

.thank-card strong {
    font-size: 12px;
    letter-spacing: 1px;
}


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

.gallery-section {
    padding: 120px 8%;
    background: var(--ivory);
}

.gallery-title {
    display: flex;

    justify-content: space-between;
    align-items: end;

    margin-bottom: 50px;
}

.gallery-title h2 {
    font-size: 68px;
    line-height: 0.9;

    color: var(--deep-burgundy);
}

.gallery-title h2 span {
    color: var(--dusty-rose);
    font-style: italic;
}

.gallery-title > p {
    max-width: 280px;

    color: var(--mocha);
    line-height: 1.7;
}

.gallery {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 22px;
}

.gallery figure {
    margin: 0;
    padding: 12px;

    background: white;

    border:
        2px solid #ead2d3;

    border-radius: 16px;

    box-shadow:
        0 15px 30px
        rgba(90, 36, 50, 0.08);
}

.gallery img {
    width: 100%;
    height: 280px;

    object-fit: cover;

    display: block;

    border-radius: 10px;
}

.gallery .large-photo img {
    height: 400px;
}

.gallery figcaption {
    padding: 15px 8px 8px;

    font-family: "Playfair Display", serif;

    color: var(--mocha);

    font-size: 14px;
}

.gallery-tip {
    margin-top: 25px;

    text-align: center;

    color: #A78A82;

    font-size: 13px;
}


/* =========================================
   PERSONAL NOTE
========================================= */

.note-section {
    padding: 120px 8%;
    background: var(--warm-cream);
}

.note-box {
    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.35fr 1fr;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 60px
        rgba(90, 36, 50, 0.12);
}

.note-left {
    background: var(--burgundy);

    padding: 45px;

    color: var(--baby-pink);

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.note-left p {
    font-family: "Cormorant Garamond", serif;

    font-size: 45px;
    line-height: 0.88;

    font-weight: 700;
}

.note-left span {
    font-size: 38px;
    color: var(--gold);
}

.note-right {
    background: var(--ivory);
    padding: 60px;
}

.note-right h2 {
    font-size: 62px;
    line-height: 0.9;

    color: var(--deep-burgundy);

    margin-bottom: 30px;
}

.note-right h2 span {
    color: var(--dusty-rose);
    font-style: italic;
}

.note-right > p:not(.small-heading) {
    color: var(--mocha);

    line-height: 1.8;

    margin-bottom: 20px;
}

.signature {
    font-family: "Cormorant Garamond", serif;

    color: var(--burgundy);

    font-size: 29px;
    font-weight: 700;

    margin-top: 30px;
}


/* =========================================
   ENDING
========================================= */

.ending {
    text-align: center;

    padding: 130px 8%;

    background:
        linear-gradient(
            135deg,
            #f3c6cf,
            #fff0e9
        );
}

.ending-symbol {
    font-size: 38px;

    color: var(--olive);

    margin-bottom: 20px;
}

.ending h2 {
    font-size: 68px;
    line-height: 0.9;

    color: var(--deep-burgundy);

    margin-bottom: 25px;
}

.ending h2 span {
    display: block;

    color: var(--burgundy);

    font-style: italic;
}

.ending > p:not(.small-heading) {
    color: var(--mocha);

    margin-bottom: 30px;
}

#topButton {
    border: 1px solid var(--dusty-rose);

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

    color: var(--burgundy);

    padding: 12px 22px;

    border-radius: 30px;

    cursor: pointer;

    transition: 0.3s;
}

#topButton:hover {
    background: white;
    transform: translateY(-2px);
}


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

footer {
    padding: 25px 8%;

    background: var(--burgundy);

    color: var(--baby-pink);

    display: flex;

    justify-content: center;

    gap: 20px;

    font-size: 12px;

    text-align: center;
}


/* =========================================
   MODAL
========================================= */

.modal {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 999;
}

.modal.active {
    display: flex;
}

.modal-background {
    position: absolute;

    inset: 0;

    background: rgba(90, 36, 50, 0.4);

    backdrop-filter: blur(5px);
}

.modal-box {
    width: min(500px, 90%);

    background: var(--ivory);

    border:
        3px solid var(--baby-pink);

    border-radius: 25px;

    padding: 45px;

    text-align: center;

    position: relative;

    z-index: 2;

    box-shadow:
        0 30px 70px
        rgba(90, 36, 50, 0.25);

    animation:
        modalPop 0.3s ease;
}

@keyframes modalPop {
    from {
        opacity: 0;

        transform:
            scale(0.9)
            translateY(20px);
    }

    to {
        opacity: 1;

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

.close-button {
    position: absolute;

    right: 20px;
    top: 15px;

    border: none;

    background: none;

    color: var(--burgundy);

    font-size: 30px;

    cursor: pointer;
}

.modal-icon {
    width: 60px;
    height: 60px;

    background: var(--baby-pink);

    color: var(--burgundy);

    border-radius: 50%;

    display: grid;
    place-items: center;

    margin: 0 auto 20px;

    font-size: 25px;
}

.modal-box h2 {
    font-size: 48px;

    color: var(--deep-burgundy);

    margin-bottom: 15px;
}

.modal-box > p:not(.small-heading) {
    color: var(--mocha);

    line-height: 1.8;

    margin-bottom: 25px;
}


/* =========================================
   SPARKLES
========================================= */

.sparkle {
    position: fixed;

    pointer-events: none;

    color: var(--dusty-rose);

    z-index: 9999;

    animation:
        sparkleAnimation 3s ease forwards;
}

@keyframes sparkleAnimation {
    0% {
        opacity: 0;

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

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translateY(-150px)
            scale(1.2);
    }
}


/* =====================================================
   TABLET RESPONSIVE
   901px → 1200px
===================================================== */

@media (max-width: 1200px) {

    .hero {
        padding-left: 6%;
        padding-right: 6%;
    }

    .envelope {
        transform:
            scale(0.85)
            rotate(-3deg);
    }

    .envelope:hover {
        transform:
            scale(0.89)
            rotate(0deg);
    }

    .cards-container {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gallery {
        grid-template-columns:
            1fr 1fr;
    }

    .gallery .large-photo {
        grid-column: 1 / -1;
    }

    .gallery .large-photo img {
        height: 380px;
    }
}


/* =====================================================
   TABLET / SMALL LAPTOP
   601px → 900px
===================================================== */

@media (max-width: 900px) {

    /* NAVBAR */

    .navbar {
        min-height: 70px;

        padding:
            0 5%;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding:
            80px 6%
            60px;

        grid-template-columns: 1fr;

        text-align: center;

        gap: 20px;
    }

    .hero-text {
        max-width: 650px;

        margin:
            0 auto;
    }

    .description {
        margin-left: auto;
        margin-right: auto;
    }


    /* ENVELOPE */

    .envelope-area {
        min-height: 500px;

        margin-top: 10px;
    }

    .envelope {
        transform:
            scale(0.82)
            rotate(-3deg);
    }

    .envelope:hover {
        transform:
            scale(0.86)
            rotate(0deg);
    }


    /* DECORATIONS */

    .leaf-one {
        left: 2%;
    }

    .leaf-two {
        right: 2%;
    }


    /* SECTIONS */

    .thank-section,
    .gallery-section,
    .note-section {
        padding:
            90px 6%;
    }


    /* CARDS */

    .cards-container {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* GALLERY */

    .gallery {
        grid-template-columns:
            1fr;
    }

    .gallery .large-photo {
        grid-column: auto;
    }

    .gallery img,
    .gallery .large-photo img {
        height: 330px;
    }


    /* NOTE */

    .note-box {
        grid-template-columns:
            1fr;
    }

    .note-left {
        min-height: 250px;
    }


    /* ENDING */

    .ending {
        padding:
            100px 6%;
    }
}


/* =====================================================
   MOBILE
   401px → 600px
===================================================== */

@media (max-width: 600px) {

    /* BODY */

    body {
        width: 100%;
    }


    /* NAVBAR */

    .navbar {
        min-height: 64px;

        padding:
            0 18px;
    }

    .logo {
        font-size: 14px;
    }

    .music-button {
        padding:
            8px 13px;

        font-size: 12px;
    }


    /* HERO */

    .hero {
        padding:
            65px 20px
            40px;

        gap: 5px;
    }

    .small-heading {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .hero h1 {
        font-size:
            clamp(55px, 16vw, 75px);

        line-height:
            0.82;

        margin-bottom: 28px;
    }

    .description {
        font-size: 14px;

        line-height: 1.7;

        max-width: 350px;
    }


    /* BUTTON */

    .main-button {
        padding:
            14px 20px;

        font-size: 13px;
    }


    /* ENVELOPE */

    .envelope-area {
        min-height: 350px;

        width: 100%;

        overflow: visible;
    }

    .glow {
        width: 340px;
        height: 340px;
    }

    .envelope {
        width: 460px;
        height: 315px;

        transform:
            scale(0.62)
            rotate(-3deg);
    }

    .envelope:hover {
        transform:
            scale(0.65)
            rotate(0deg);
    }

    .letter {
        /* Keeps the letter inside the smaller envelope */
        width: 350px;
    }


    /* FLOATING DECORATIONS */

    .heart-one {
        top: 25px;
        left: 5%;

        font-size: 22px;
    }

    .heart-two {
        bottom: 35px;
        right: 5%;

        font-size: 19px;
    }

    .star-one {
        top: 45px;
        right: 5%;

        font-size: 19px;
    }

    .star-two {
        bottom: 30px;
        left: 8%;

        font-size: 15px;
    }

    .leaf-one,
    .leaf-two {
        display: none;
    }


    /* SECTIONS */

    .thank-section,
    .gallery-section,
    .note-section {
        padding:
            75px 20px;
    }


    /* SECTION TITLES */

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2,
    .gallery-title h2 {
        font-size:
            clamp(48px, 14vw, 62px);

        line-height:
            0.9;
    }


    /* CARDS */

    .cards-container {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .thank-card {
        min-height: 300px;

        padding: 25px;
    }

    .thank-card h3 {
        font-size: 35px;
    }


    /* GALLERY */

    .gallery-title {
        display: block;

        margin-bottom: 35px;
    }

    .gallery-title > p {
        margin-top: 20px;

        font-size: 14px;
    }

    .gallery {
        gap: 16px;
    }

    .gallery figure {
        padding: 9px;
    }

    .gallery img,
    .gallery .large-photo img {
        height: 280px;
    }

    .gallery figcaption {
        font-size: 13px;
    }


    /* NOTE */

    .note-box {
        border-radius: 18px;
    }

    .note-left {
        min-height: 200px;

        padding: 30px;
    }

    .note-left p {
        font-size: 38px;
    }

    .note-left span {
        font-size: 30px;
    }

    .note-right {
        padding: 35px 25px;
    }

    .note-right h2 {
        font-size:
            clamp(45px, 13vw, 58px);
    }


    /* ENDING */

    .ending {
        padding:
            90px 20px;
    }

    .ending h2 {
        font-size:
            clamp(48px, 14vw, 62px);
    }


    /* MODAL */

    .modal-box {
        width:
            calc(100% - 30px);

        padding:
            40px 25px;
    }

    .modal-box h2 {
        font-size: 40px;
    }

    .modal-box > p:not(.small-heading) {
        font-size: 14px;
    }


    /* FOOTER */

    footer {
        padding:
            22px 15px;

        flex-direction: column;

        gap: 8px;

        font-size: 11px;
    }
}


/* =====================================================
   VERY SMALL PHONES
   400px and below
===================================================== */

@media (max-width: 400px) {

    .navbar {
        padding:
            0 14px;
    }

    .logo {
        font-size: 12px;
    }

    .music-button {
        padding:
            7px 10px;

        font-size: 11px;
    }


    .hero {
        padding:
            55px 16px
            30px;
    }

    .hero h1 {
        font-size: 55px;
    }

    .description {
        font-size: 13px;
    }


    /* Smaller envelope */

    .envelope-area {
        min-height: 315px;
    }

    .envelope {
        transform:
            scale(0.53)
            rotate(-3deg);
    }

    .envelope:hover {
        transform:
            scale(0.56)
            rotate(0deg);
    }


    /* Cards */

    .thank-card {
        min-height: 275px;

        padding: 22px;
    }

    .thank-card h3 {
        font-size: 32px;
    }


    /* Photos */

    .gallery img,
    .gallery .large-photo img {
        height: 240px;
    }


    /* Note */

    .note-left {
        min-height: 180px;
    }

    .note-left p {
        font-size: 34px;
    }


    /* Modal */

    .modal-box {
        padding:
            35px 20px;
    }

    .modal-box h2 {
        font-size: 35px;
    }
}


/* =====================================================
   TOUCH DEVICES
===================================================== */

@media (hover: none) {

    .thank-card:hover {
        transform: none;

        box-shadow: none;
    }

    .main-button:hover {
        transform: none;
    }

    .music-button:hover {
        transform: none;
    }
}


/* =====================================================
   REDUCE ANIMATION IF PHONE USER
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }
}
#passwordScreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #FFF7F0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.password-box {
    width: min(450px, 100%);
    text-align: center;
    background: #F3C6CF;
    padding: 45px 30px;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(90, 36, 50, 0.2);
}

.password-heart {
    font-size: 55px;
    color: #722F3E;
}

.password-box h1 {
    color: #5A2432;
    font-family: "Playfair Display", serif;
}

.password-box p {
    color: #4A3034;
}

#secretPassword {
    width: 80%;
    padding: 14px;
    border: 2px solid #B97883;
    border-radius: 25px;
    margin: 15px 0;
    font-size: 16px;
    text-align: center;
}

.password-box button {
    border: none;
    padding: 14px 22px;
    border-radius: 25px;
    background: #722F3E;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

#wrongPassword {
    color: #722F3E;
    font-weight: bold;
}