.navmenu.svelte-1k62apz {
        position: absolute;
        top: 0px;
        z-index: 30;
        width: 100%;
        background-color: transparent;
}

    /* Make dropdown open on hover for mouse users, keyboard users will use the JS controls */
    @media (hover: hover) {
        .dropdown.svelte-1k62apz:hover .dropdown-menu:where(.svelte-1k62apz) {
                display: block;
        }
    }

    .btnlanguage.svelte-1k62apz {
        display: flex;
        width: 9rem;
        justify-content: space-between;
        background-color: var(--primary-color);
        color: var(--secondary-color);
        border-width: 2px;
        border-style: solid;
        border-color: var(--secondary-color);
        /* Ensure good padding for touch targets */
        border-radius: 0.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
}

    /* Focus and hover state */
    .btnlanguage.svelte-1k62apz:hover, 
    .btnlanguage.svelte-1k62apz:focus {
        background-color: var(--secondary-color);
        color: var(--primary-color);
        outline: 2px solid transparent;
        outline-offset: 2px;
}

    .dropdown-menu.svelte-1k62apz {
        border-radius: 0.25rem;
        border-width: 2px;
        border-style: solid;
        border-color: var(--secondary-color);
        background-color: var(--primary-color);
        position: absolute;
        margin-top: 0px;
        width: 9rem;
        padding-top: 0.25rem;
        font-weight: 700;
        color: var(--secondary-color);
        /* Add a little shadow for depth */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .dropdown-item.svelte-1k62apz {
        cursor: pointer;
        /* Better padding for touch targets */
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
        transition: background-color 0.2s;
}

    /* Focus and hover state for items */
    .dropdown-item.svelte-1k62apz:hover,
    .dropdown-item.svelte-1k62apz:focus {
        background-color: var(--secondary-color);
        color: var(--primary-color);
        outline: 2px solid transparent;
        outline-offset: 2px;
}

    .arrow.svelte-1k62apz {
        height: 1rem;
        width: 1rem;
        fill: currentColor;
        color: var(--secondary-color);
        margin-left: 0.5rem;
}

    /* Flip arrow when dropdown is open */
    [aria-expanded="true"].svelte-1k62apz .arrow:where(.svelte-1k62apz) {
        transform: rotate(180deg);
        transition: transform 0.2s;
    }

    .heading.svelte-1k62apz {
        font-weight: 700;
        color: var(--secondary-color);
        font-size: 1.25rem;
        text-transform: uppercase;
        line-height: 1.5rem;
}

    .navbar.svelte-1k62apz {
        margin: auto;
        display: flex;
        max-width: 1024px;
        align-items: center;
        justify-content: space-between;
}

    .hearts-container.svelte-vr5f40 {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        z-index: -10;
        background-color: var(--primary-color);
}

    /* Heart shape using CSS - improved shape */
    .heart.svelte-vr5f40 {
        position: absolute;
        display: block;
        width: var(--size);
        height: var(--size);
        opacity: var(--opacity);
        left: var(--x);
        top: var(--y);
        animation: svelte-vr5f40-float var(--duration) ease-in-out infinite;
        animation-delay: var(--delay);
        will-change: transform;
        position: relative;
        background-color: var(--heart-color, var(--secondary-color));
        /* Apply initial rotation to ensure hearts are oriented correctly before animation starts */
        transform: rotate(calc(var(--base-rotation) + var(--rotation-variation) * 0));
}

    .heart.svelte-vr5f40:before, .heart.svelte-vr5f40:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--heart-color, var(--secondary-color));
        border-radius: 50%;
    }

    .heart.svelte-vr5f40:before {
        left: -50%;
        top: 0;
    }

    .heart.svelte-vr5f40:after {
        top: -50%;
        left: 0;
    }

    @keyframes svelte-vr5f40-float {
        0% {
            transform: translateY(0) translateX(0) rotate(calc(var(--base-rotation) + var(--rotation-variation) * 0));
        }
        25% {
            transform: translateY(-20px) translateX(calc(var(--horizontal-movement) * 0.5)) rotate(calc(var(--base-rotation) + var(--rotation-variation) * 0.5));
        }
        50% {
            transform: translateY(-40px) translateX(var(--horizontal-movement)) rotate(calc(var(--base-rotation) + var(--rotation-variation)));
        }
        75% {
            transform: translateY(-20px) translateX(calc(var(--horizontal-movement) * 0.5)) rotate(calc(var(--base-rotation) + var(--rotation-variation) * 0.5));
        }
        100% {
            transform: translateY(0) translateX(0) rotate(calc(var(--base-rotation) + var(--rotation-variation) * 0));
        }
    }

    /* Reduce motion for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .heart.svelte-vr5f40 {
            animation: none;
        }
    }

    /* Direct font styles - we'll load the font dynamically in the script */

    /* Consolidated CSS variables */
    :root {
        /* Greeting card variables */
        --greeting-max-width: 55rem;
        --greeting-width: 90vw;
        --greeting-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        --greeting-border-radius: 0.75rem;
        --greeting-padding: 1.5rem;
        --greeting-font-size: clamp(1.5rem, 4vw, 2.3rem);
        --greeting-bg-color: rgba(255, 255, 255, 0.2);
        --greeting-blur: 10px;
        --greeting-max-height: 70vh;
        --greeting-scrollbar-color: rgba(255, 255, 255, 0.5);

        /* Controls variables */
        --controls-max-width: 28rem;
        --controls-gap: 1rem;
        --controls-bg-color: rgba(255, 255, 255, 0.3);
        --controls-blur: 8px;
        --controls-padding: 0.75rem 1rem 0.5rem;
        --controls-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        /* Progress bar variables */
        --progress-height: 4px;
        --progress-bg-color: rgba(255, 255, 255, 0.2);
        --progress-z-index: 100;
        --progress-transition: width 0.1s linear;
        --progress-shadow: 0 0 3px rgba(255, 255, 255, 0.5);

        /* Button variables */
        --button-size: 2.5rem;
        --button-font-size: 1.25rem;
        --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        --button-transition: transform 0.2s;
        --button-focus-shadow: 0 0 0 2px white, 0 0 0 4px var(--secondary-color);
        --button-scale: 1.1;
        --disabled-opacity: 0.5;

        /* Navigation button variables */
        --nav-button-size: 2rem;
        --nav-button-gap: 0.5rem;
        --nav-margin-left: 0.75rem;
        --nav-transition: transform 0.2s, opacity 0.2s;
        --nav-icon-font-size: 1rem;
        --nav-icon-line-height: 2rem;
        --prev-icon-font-size: 1.1rem;
        --button-hover-scale: 1.1;

        /* Slider variables */
        --slider-height: 0.5rem;
        --slider-margin: 0.5rem;
        --slider-bg: rgba(255, 255, 255, 0.3);
        --slider-radius: 15px;
        --thumb-size: 18px;
        --thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        --thumb-transition: transform 0.1s;
        --thumb-hover-scale: 1.2;
        --slider-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px var(--secondary-color);
        --slider-focus-opacity: 0.5;
        --thumb-focus-shadow: 0 0 0 2px white;
    }

    .content-display-container.svelte-w4ooxj {
        position: fixed;
        inset: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        background-color: transparent;
        color: var(--secondary-color);
        pointer-events: none;
        z-index: 20; /* Allow clicks to pass through to the heart */
        height: 100vh; /* Use viewport height */
        max-height: 100vh; /* Prevent scrolling */
}

    /* High contrast mode version */
    .content-display-container.high-contrast.svelte-w4ooxj {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}

    /* Greeting container - perfectly centered vertically and horizontally */
    .greeting-container.svelte-w4ooxj {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
}

    /* Greeting card styling */

    .greeting.svelte-w4ooxj {
        pointer-events: auto;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
        line-height: 1.6;
        max-width: var(--greeting-max-width);
        width: var(--greeting-width);
        box-shadow: var(--greeting-box-shadow);
        border-radius: var(--greeting-border-radius);
        padding: var(--greeting-padding);

        /* Apply cursive font directly */
        font-family: "Dancing Script", cursive !important;
        font-size: var(--greeting-font-size);

        /* Semi-transparent background */
        background-color: var(--greeting-bg-color);
        backdrop-filter: blur(var(--greeting-blur));
        -webkit-backdrop-filter: blur(var(--greeting-blur));
        border-width: 1px;
        border-color: rgb(255 255 255 / 0.1);

        /* Added scrolling for long content */
        max-height: var(--greeting-max-height);
        overflow-y: auto;

        /* Smooth scrolling */
        scroll-behavior: smooth;

        /* Style scrollbar */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--greeting-scrollbar-color) transparent; /* Firefox */
}

    /* Webkit scrollbar styling */
    .greeting.svelte-w4ooxj::-webkit-scrollbar {
        width: 6px;
    }

    .greeting.svelte-w4ooxj::-webkit-scrollbar-track {
        background: transparent;
    }

    .greeting.svelte-w4ooxj::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
    }

    .message.svelte-w4ooxj {
        margin-bottom: 1rem;
        overflow-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
                hyphens: auto;
        text-align: center;
        font-family: "Dancing Script", cursive !important;
        white-space: pre-line; /* Preserve newlines in text */
    }

    .greeter.svelte-w4ooxj {
        font-weight: bold;
        margin-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-top: 0.75rem;
        font-size: 0.85em; /* Slightly smaller than the message */
        text-align: center;
    }

    /* Controls container fixed at the bottom */
    .controls-container.svelte-w4ooxj {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5rem; /* Increased from 3rem to 5rem to make more room for footer */
        padding-left: 1rem;
        padding-right: 1rem;
        pointer-events: none; /* Allow clicks to reach underneath */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30; /* Ensure controls are above other elements */
    }

    /* Controls styling */

    /* Controls */
    .controls.svelte-w4ooxj {
        pointer-events: auto;
        position: relative;
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border-width: 1px;
        border-color: rgb(255 255 255 / 0.3);
        gap: var(--controls-gap);
        max-width: var(--controls-max-width);
        background-color: var(--controls-bg-color);
        backdrop-filter: blur(var(--controls-blur));
        -webkit-backdrop-filter: blur(var(--controls-blur));
        padding: var(--controls-padding);
        box-shadow: var(--controls-box-shadow);
}

    /* Progress bar styling */

    /* Top progress bar container */
    .top-progress-container.svelte-w4ooxj {
        pointer-events: none;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        overflow: hidden;
        height: var(--progress-height);
        background-color: var(--progress-bg-color);
        z-index: var(--progress-z-index); /* Ensure it appears above everything */
}

    /* Actual top progress bar */
    .top-progress-bar.svelte-w4ooxj {
        height: 100%;
        background-color: var(--secondary-color);
        transition: var(--progress-transition);
        box-shadow: var(--progress-shadow);
}

    /* Style for paused progress */
    .top-progress-bar.paused.svelte-w4ooxj {
        opacity: 0.5;
        background-image: linear-gradient(
            45deg, 
            rgba(255, 255, 255, 0.3) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, 0.3) 50%, 
            rgba(255, 255, 255, 0.3) 75%, 
            transparent 75%, 
            transparent
        );
        background-size: 10px 10px;
        animation: svelte-w4ooxj-progressStripes 1s linear infinite;
    }

    @keyframes svelte-w4ooxj-progressStripes {
        0% { background-position: 0 0; }
        100% { background-position: 20px 0; }
    }

    /* Define variables for pause button */
    :root {
        --button-size: 2.5rem;
        --button-font-size: 1.25rem;
        --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        --button-transition: transform 0.2s;
        --button-focus-shadow: 0 0 0 2px white, 0 0 0 4px var(--secondary-color);
        --button-scale: 1.1;
    }

    /* Pause button */
    .pause-button.svelte-w4ooxj {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border-style: none;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        width: var(--button-size);
        height: var(--button-size); 
        font-size: var(--button-font-size);
        box-shadow: var(--button-shadow);
        transition: var(--button-transition);
}

    .pause-button.svelte-w4ooxj:hover,
    .pause-button.svelte-w4ooxj:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        transform: scale(var(--button-scale));
        box-shadow: var(--button-focus-shadow);
}

    /* Speed control container */
    .speed-control.svelte-w4ooxj {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 0.5rem;
    }

    .speed-label.svelte-w4ooxj {
        font-size: 0.875rem;
        font-weight: 500;
        width: 100%;
        text-align: center;
        margin-bottom: 0.25rem;
    }

    /* Slider container */
    .slider-container.svelte-w4ooxj {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
    }

    .slider-label.svelte-w4ooxj {
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
    }

    /* Define variables for navigation buttons */
    :root {
        --nav-button-size: 2rem;
        --nav-button-gap: 0.5rem;
        --nav-margin-left: 0.75rem;
        --nav-transition: transform 0.2s, opacity 0.2s;
    }

    /* History navigation styling */
    .history-navigation.svelte-w4ooxj {
        display: flex;
        gap: var(--nav-button-gap);
        margin-left: var(--nav-margin-left);
}

    .nav-button.svelte-w4ooxj {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        cursor: pointer;
        border-style: none;
        padding: 0px;
        line-height: 1;
        width: var(--nav-button-size);
        height: var(--nav-button-size);
        transition: var(--nav-transition);
}

    /* Define variables for nav icon */
    :root {
        --nav-icon-font-size: 1rem;
    }

    .nav-icon.svelte-w4ooxj {
        position: relative;
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: var(--nav-icon-font-size); /* Increased size for better visibility */
}

    /* Define variables for button icon alignment */
    :root {
        --nav-icon-line-height: 2rem; /* Match the button height */
        --prev-icon-font-size: 1.1rem; /* Slightly larger than the base size */
    }

    /* Make sure both icons are centered properly */
    .prev-button.svelte-w4ooxj .nav-icon:where(.svelte-w4ooxj),
    .next-button.svelte-w4ooxj .nav-icon:where(.svelte-w4ooxj) {
        display: block;
        text-align: center;
        line-height: var(--nav-icon-line-height);
}

    /* Make the prev icon slightly larger to match the next icon's visual size */
    .prev-button.svelte-w4ooxj .nav-icon:where(.svelte-w4ooxj) {
        font-size: var(--prev-icon-font-size);
    }

    /* Define variables for button states */
    :root {
        --disabled-opacity: 0.5;
        --button-hover-scale: 1.1;
    }

    .nav-button.svelte-w4ooxj:disabled {
        cursor: not-allowed;
        opacity: var(--disabled-opacity);
}

    .nav-button.svelte-w4ooxj:not(:disabled):hover,
    .nav-button.svelte-w4ooxj:not(:disabled):focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        transform: scale(var(--button-hover-scale));
}

    /* Define variables for slider */
    :root {
        --slider-height: 0.5rem;
        --slider-margin: 0.5rem;
        --slider-bg: rgba(255, 255, 255, 0.3);
        --slider-radius: 15px;
    }

    /* Custom slider styling */
    .speed-slider.svelte-w4ooxj {
        width: 100%;
        outline: 2px solid transparent;
        outline-offset: 2px;
        height: var(--slider-height);
        margin-left: var(--slider-margin);
        margin-right: var(--slider-margin);
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        background: var(--slider-bg);
        border-radius: var(--slider-radius);
}

    /* Define variables for slider thumb */
    :root {
        --thumb-size: 18px;
        --thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        --thumb-transition: transform 0.1s;
    }

    .speed-slider.svelte-w4ooxj::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--thumb-size);
        height: var(--thumb-size);
        cursor: pointer;
        border-radius: 9999px;
        background-color: var(--secondary-color);
        box-shadow: var(--thumb-shadow);
        -webkit-transition: var(--thumb-transition);
        transition: var(--thumb-transition);
    }

    .speed-slider.svelte-w4ooxj::-moz-range-thumb {
        width: var(--thumb-size);
        height: var(--thumb-size);
        cursor: pointer;
        border-radius: 9999px;
        border-style: none;
        background-color: var(--secondary-color);
        box-shadow: var(--thumb-shadow);
        -moz-transition: var(--thumb-transition);
        transition: var(--thumb-transition);
    }

    /* Define variables for slider states */
    :root {
        --thumb-hover-scale: 1.2;
        --slider-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px var(--secondary-color);
        --slider-focus-opacity: 0.5;
    }

    .speed-slider.svelte-w4ooxj::-webkit-slider-thumb:hover,
    .speed-slider.svelte-w4ooxj::-moz-range-thumb:hover {
        transform: scale(var(--thumb-hover-scale));
    }

    .speed-slider.svelte-w4ooxj:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: var(--slider-focus-shadow);
        opacity: var(--slider-focus-opacity);
}

    /* Define variables for thumb focus */
    :root {
        --thumb-focus-shadow: 0 0 0 2px white;
    }

    /* Focus styles for accessibility */
    .speed-slider.svelte-w4ooxj:focus::-webkit-slider-thumb {
        box-shadow: var(--thumb-focus-shadow);
    }

    .speed-slider.svelte-w4ooxj:focus::-moz-range-thumb {
        box-shadow: var(--thumb-focus-shadow);
    }

    /* Media query for smaller screens */
    @media (max-width: 640px) {
        .greeting.svelte-w4ooxj {
            padding: 1rem;
            width: 95vw; /* Take more width on mobile */
            max-width: 95vw;
            font-size: clamp(1.2rem, 5vw, 1.8rem); /* Smaller font on mobile */
        }

        .controls.svelte-w4ooxj {
            flex-direction: column;
            padding: 0.75rem;
            border-radius: 0.75rem;
            max-width: min(90vw, 300px);
        }

        .speed-control.svelte-w4ooxj {
            margin-top: 0.5rem;
            margin-left: 0;
            width: 100%;
        }

        .history-navigation.svelte-w4ooxj {
            margin-left: 0;
            margin-top: 0.5rem;
            justify-content: center;
        }
    }

    /* For very short screens */
    @media (max-height: 500px) {
        .greeting.svelte-w4ooxj {
            max-height: 50vh; /* Reduced maximum height */
            padding: 0.75rem;
            font-size: clamp(1rem, 3.5vw, 1.4rem); /* Smaller font */
            margin-bottom: 70px; /* Push up more to make room for controls and footer */
        }

        .controls-container.svelte-w4ooxj {
            margin-bottom: 4rem; /* More space for footer */
        }

        .controls.svelte-w4ooxj {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            transform: scale(0.9); /* Slightly smaller controls */
        }

        .greeting-container.svelte-w4ooxj {
            align-items: center; /* Keep centered vertically */
            padding-bottom: 80px; /* Increased offset for controls and footer */
        }
    }

    /* For extra wide screens */
    @media (min-width: 1600px) {
        .greeting.svelte-w4ooxj {
            max-width: 65rem; /* Even wider on large screens */
            padding: 2rem;
        }
    }
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Montserrat, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
	.container {
  width: 100%;
}
	@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
	@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
	@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
	@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
	@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
	.pointer-events-auto {
  pointer-events: auto;
}
	.visible {
  visibility: visible;
}
	.fixed {
  position: fixed;
}
	.absolute {
  position: absolute;
}
	.relative {
  position: relative;
}
	.inset-0 {
  inset: 0px;
}
	.bottom-0 {
  bottom: 0px;
}
	.left-0 {
  left: 0px;
}
	.right-0 {
  right: 0px;
}
	.top-0 {
  top: 0px;
}
	.z-20 {
  z-index: 20;
}
	.z-30 {
  z-index: 30;
}
	.z-50 {
  z-index: 50;
}
	.z-\[10\] {
  z-index: 10;
}
	.z-\[1\] {
  z-index: 1;
}
	.z-\[2\] {
  z-index: 2;
}
	.m-3 {
  margin: 0.75rem;
}
	.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
	.mb-2 {
  margin-bottom: 0.5rem;
}
	.mt-0 {
  margin-top: 0px;
}
	.block {
  display: block;
}
	.inline-block {
  display: inline-block;
}
	.flex {
  display: flex;
}
	.inline-flex {
  display: inline-flex;
}
	.grid {
  display: grid;
}
	.hidden {
  display: none;
}
	.h-4 {
  height: 1rem;
}
	.h-full {
  height: 100%;
}
	.h-screen {
  height: 100vh;
}
	.min-h-screen {
  min-height: 100vh;
}
	.w-0 {
  width: 0px;
}
	.w-1\/2 {
  width: 50%;
}
	.w-36 {
  width: 9rem;
}
	.w-full {
  width: 100%;
}
	.w-screen {
  width: 100vw;
}
	.max-w-screen-lg {
  max-width: 1024px;
}
	.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
	.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
	.cursor-pointer {
  cursor: pointer;
}
	.resize {
  resize: both;
}
	.flex-row {
  flex-direction: row;
}
	.flex-col {
  flex-direction: column;
}
	.items-center {
  align-items: center;
}
	.justify-center {
  justify-content: center;
}
	.justify-between {
  justify-content: space-between;
}
	.overflow-hidden {
  overflow: hidden;
}
	.rounded {
  border-radius: 0.25rem;
}
	.rounded-full {
  border-radius: 9999px;
}
	.rounded-lg {
  border-radius: 0.5rem;
}
	.border {
  border-width: 1px;
}
	.border-2 {
  border-width: 2px;
}
	.border-solid {
  border-style: solid;
}
	.border-none {
  border-style: none;
}
	.border-secondary {
  border-color: var(--secondary-color);
}
	.bg-primary {
  background-color: var(--primary-color);
}
	.bg-secondary {
  background-color: var(--secondary-color);
}
	.bg-transparent {
  background-color: transparent;
}
	.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
	.fill-current {
  fill: currentColor;
}
	.p-0 {
  padding: 0px;
}
	.p-4 {
  padding: 1rem;
}
	.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
	.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
	.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
	.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
	.pb-5 {
  padding-bottom: 1.25rem;
}
	.pl-5 {
  padding-left: 1.25rem;
}
	.pr-5 {
  padding-right: 1.25rem;
}
	.text-center {
  text-align: center;
}
	.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
	.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
	.font-bold {
  font-weight: 700;
}
	.font-semibold {
  font-weight: 600;
}
	.uppercase {
  text-transform: uppercase;
}
	.leading-6 {
  line-height: 1.5rem;
}
	.text-primary {
  color: var(--primary-color);
}
	.text-secondary {
  color: var(--secondary-color);
}
	.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
	.no-underline {
  text-decoration-line: none;
}
	.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
	.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
	.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
	.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
	.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
	.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
	.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
	.ring-offset-4 {
  --tw-ring-offset-width: 4px;
}
	.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
	.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
	.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
	.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
	.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
	.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

	/* Import a nice cursive font for the footer love message */
    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');

    /* Consolidated CSS variables */
    :root {
        /* Base styles */
        font-family: Montserrat, Arial, sans-serif;

        /* Button variables */
        --button-offset: 5em;
        --button-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        /* Pulse animation variables */
        --pulse-color: rgba(255, 165, 175, 0.7);
        --pulse-scale: 1.05;

        /* Heart shape variables */
        --heart-size: 10rem;
        --heart-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.35);

        /* Click hint variables */
        --hint-top-position: 30%;
        --hint-animation-duration: 2s;

        /* Footer variables */
        --footer-padding: 0.75rem;
        --footer-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        --footer-hover-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        --footer-z-index: 25;
    }

    ::-moz-selection {
  background-color: var(--primary-color);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

    ::selection {
  background-color: var(--primary-color);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

    /* Globally applied focus styles for better keyboard navigation */
    *:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--secondary-color);
  --tw-ring-offset-width: 2px;
}

    /* Hide focus styles when using mouse, but show when using keyboard */
    .js-focus-visible :focus:not(.focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 0px;
}

    /* Skip to main content link - visually hidden until focused */
    .skip-link {
  position: absolute;
  top: -100%;
  margin: 0.75rem;
  background-color: var(--secondary-color);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        transition: top 0.2s;
}

    .skip-link:focus {
  top: 0px;
  z-index: 50;
}

    .app-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background-color: transparent;
}

    main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: 100%;
  background-color: transparent;
}

    .overlay {
  position: absolute;
  top: 0px;
  z-index: 10;
  height: 100vh;
  width: 50%;
  background-color: var(--primary-color);
}

    .overlay-left {
  right: 0px;
}

    .overlay-right {
  left: 0px;
}

    /* Click hint styling */

    .click-hint {
  position: absolute;
  left: 50%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
        top: var(--hint-top-position);
        transform: translateX(-50%);
        animation: float var(--hint-animation-duration) ease-in-out infinite;
}

    .hint-text {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.8);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  color: var(--primary-color);
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.5);
  text-align: center;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .arrow-down {
  height: 0px;
  width: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(255, 255, 255, 0.8);
        animation: bounce 1s ease-in-out infinite;
}

    @keyframes float {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        50% {
            transform: translateX(-50%) translateY(-10px);
        }
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(5px);
        }
    }

    /* Overlay button positioning */

    #overlay_button {
  position: absolute;
  z-index: 50;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
  border-style: none;
        top: calc(50% - var(--button-offset));  /* position the top edge of the element at the middle of the parent */
        left: calc(50% - var(--button-offset)); /* position the left edge of the element at the middle of the parent */
        transform: rotate(45deg);
        transition: transform var(--button-transition);
}

    /* Pulsing animation for the heart button */
    .pulse-animation {
        animation: pulse 2s infinite;
    }

    /* Pulse animation */

    @keyframes pulse {
        0% {
            transform: rotate(45deg) scale(1);
            box-shadow: 0 0 0 0 var(--pulse-color);
        }

        70% {
            transform: rotate(45deg) scale(var(--pulse-scale));
            box-shadow: 0 0 0 15px rgba(255, 165, 175, 0);
        }

        100% {
            transform: rotate(45deg) scale(1);
            box-shadow: 0 0 0 0 rgba(255, 165, 175, 0);
        }
    }

    /* This adds a subtle animation when heart button is focused for better visibility */
    #overlay_button:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 4px;
  --tw-ring-offset-color: var(--primary-color);
        transform: rotate(45deg) scale(1.05);
}

    #overlay_button:hover {
        transform: rotate(45deg) scale(1.08);
        filter: brightness(1.1);
    }

    .scale-down-hor-right {
        animation: scale-down-hor-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation-fill-mode: forwards; 
    }

    .scale-down-hor-left {
        animation: scale-down-hor-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation-fill-mode: forwards;
    }

    .rotate-center {
        animation: fade-out 1.3s ease-in-out both;
        animation-fill-mode: forwards;
    }

    .fade-out {
        animation: fade-out 0.7s ease-in-out both;
        animation-fill-mode: forwards;
    }

    /**
     * ----------------------------------------
     * animation scale-down-hor-left
     * ----------------------------------------
     */
    @keyframes scale-down-hor-left {
        0% {
            transform: scaleX(1);
            transform-origin: 0% 0%;
        }
        100% {
            transform: scaleX(0);
            transform-origin: 0% 0%;
        }
    }

    @keyframes scale-down-hor-right {
        0% {
            transform: scaleX(1);
            transform-origin: 100% 100%;
        }
        100% {
            transform: scaleX(0);
            transform-origin: 100% 100%;
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1.0;
        }
        100% {
            opacity: 0;
            visibility: hidden;
        }
    }

    /* Heart shape styling */

    .heart-shape {
  position: absolute;
  position: relative;
  z-index: 50;
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--secondary-color);
        width: var(--heart-size);
        height: var(--heart-size);
        box-shadow: var(--heart-shadow);
}

    .heart-shape:before, .heart-shape:after {
  position: absolute;
  background-color: var(--secondary-color);
        content: '';
        width: var(--heart-size);
        height: var(--heart-size);
        border-radius: 50%;
}

    .heart-shape:before {
  bottom: 0px;
        left: calc(-1 * var(--heart-size) / 2); /* -20 = -40/2 */
}

    .heart-shape:after {
  right: 0px;
        top: calc(-1 * var(--heart-size) / 2); /* -20 = -40/2 */
}

    /* Add reduced motion preferences for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .scale-down-hor-right,
        .scale-down-hor-left,
        .rotate-center,
        .fade-out,
        .pulse-animation,
        .click-hint,
        .arrow-down {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Copyright Footer Styles */
    .copyright-footer {
  pointer-events: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--secondary-color);
        padding: var(--footer-padding);
        padding-bottom: 1rem;
        z-index: var(--footer-z-index); /* Above the heart but below the controls */
}

    .copyright-footer p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
        text-shadow: var(--footer-text-shadow); /* Text shadow for better readability */
}

    .copyright-footer a {
  pointer-events: auto;
  font-weight: 700;
  color: var(--secondary-color);
  text-decoration-line: none;
        transition: color 0.2s, text-shadow 0.2s;
}

    .copyright-footer a:hover,
    .copyright-footer a:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
        text-shadow: var(--footer-hover-shadow);
}

    .love-message {
  color: var(--secondary-color);
        font-family: 'Dancing Script', cursive;
        font-size: 1rem;
}

    @media (min-width: 1024px) {

  .lg\:p-8 {
    padding: 2rem;
  }
}