/* Define the color palette */
        :root {
            --nude: #f4e4d4;
            --beige:  #e2ccb5;
            --camel: #b2957b;
            --darkcamel: #816b588e;
            }
    
            /* Custom navbar styling */
            .navbar {
                /*background-color: var(--nude);*/
                background-color: #c6a177; /* Warm beige for the header background */
                color: white;
                font-weight: 500;
                padding: 0.1rem 1rem; /* Smaller padding for a compact look */
                opacity: 0.7;
                font-size: 1rem;
                position: fixed; /* Keeps the navbar in a fixed position */
                top: 0;          /* Aligns it to the top of the page */
                width: 100%;     /* Ensures it spans the full width */
                z-index: 1000;   /* Keeps it above other content */
            }
            .navbar-brand img {
            max-height: 40px;
            }
            .nav-link {
            color: white;
            padding: 0.5rem 1rem;
            transition: color 0.3s;
            }
            .nav-link:hover {
            color: var(--darkcamel) !important; /*var(--beige);*/
            }
            .navbar-toggler-icon {
            background-color: var(--camel);
            }
            .btn-signup, .btn-login {
            background-color: var(--camel);
            color: white;
            border-radius: 20px;
            padding: 5px 15px;
            transition: background-color 0.3s;
            }
            .btn-signup:hover, .btn-login:hover {
            background-color: var(--beige);
            color: black; /*var(--camel);*/
            }
            .btn-primary {
                background-color: var(--camel);
                border-color: var(--darkcamel);
            }
            .btn-primary:hover {
                background-color: var(--beige);
                border-color: var(--camel);
                color: var(--darkcamel);
            }
            /* Full-page background image */
            body, html {
                height: 100%;
                margin: 0;
                background-image: url('../images/yfh-background-1.png');
                background-size: cover;   /* Ensures the image covers the entire viewport */
                background-position: center;
                background-repeat: no-repeat;
                color: #fff;
                font-family: Arial, sans-serif;
                background-attachment: fixed; /* Keeps the image fixed */
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            .container {
                flex: 1; /* Makes the main content area expand */
            }
            
            /* Centered content */
            .content-center {
                min-height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                flex-direction: column;
                padding: 0 15px;
                margin-top: 80px; /* Adjust depending on your navbar height */
                /*background: rgba(0, 0, 0, 0.2); /* Optional dark overlay for text readability */
            }
    
            /* Styling for the text input and button */
            .search-bar {
                max-width: 500px;
                width: 100%;
            }




            /* About */
                    
            body {
                background-color: #fefaf6; /* Subtle nude tone */
                color: #5a4633; /* Elegant camel tone for text */
            }
            .header {
                text-align: center;
                padding: 2rem;
                background-color: #c6a177; /* Warm beige for the header background */
                color: white;
                font-size: 2rem;
                font-weight: bold;
            }
            .content {
                padding: 2rem;
                margin: auto;
                max-width: 800px;
                line-height: 1.6;
            }
            .call-to-action {
                text-align: center;
                margin-top: 2rem;
                font-weight: bold;
                color: var(--darkcamel);
            }

            /* Main content area grows to fill the space between header and footer */
            main {
                flex: 1; /* Allow the main content to grow and push the footer down */
                padding-bottom: 20px; /* Add spacing to prevent content from touching the footer */
            }

            /* Footer styles */
            footer {
                background-color: #c6a177; /* Warm beige for the header background */
                text-align: center;
                font-size: 14px;
                color: #6c757d;
                border-top: 1px solid var(--beige);
                width: 100%; /* Ensure it spans the full width */
                position: relative; /* Make sure it doesn't overlap */
                z-index: 10; /* Keep it above other elements */
                padding: 10px;
                position: relative; /* Keeps it below the main content */
                bottom: 0;
            }

            /* Add padding or margin to ensure content does not overlap the header */
            body {
                padding-top: 40px; /* Adjust to match your fixed header height */
            }

            /* Optional: Style flashed messages */
            .flash-message {
                margin-bottom: 2px; /* Add some spacing between flash messages */
                z-index: 1050; /* Ensure flash messages appear above other content */
                position: relative; /* Prevent accidental overlap issues */
            }



        .response-paragraph {
            display: none; /* Initially hidden */
            max-width: 80%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* max-height: 300px;  Limits height to prevent excessive growth */
            margin-top: 20px; /* Adds space below the navbar */
            margin-bottom: 40px; /* Adds space above the footer */
            text-align: left; /* Align text to the left for readability */
            font-size: 1.1rem; /* Slightly larger text for better readability */
            line-height: 1.6; /* Adjust line spacing for better legibility */
            color: #333; /* Use a soft color for text */
            background-color: rgba(248, 249, 250, 0.6); 
            /* background-color: #f8f9fa; Optional: subtle background */
            padding: 15px; /* Add padding inside the block */
            border-radius: 8px; /* Slightly round the corners */
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
        }

        #response {
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            max-width: 80%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow-y: auto;
            min-height: 50px; /* Smallest height before expanding */
            /* max-height: 400px; Prevents growing indefinitely */
        }
        

        #generate-image-btn {
            display: none; /* Initially hidden */
            margin-top: 10px;
        }
        
        img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        /* Fullscreen overlay */
        #image-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            overflow: hidden; /* Prevent scrolling */
        }

        /* Content inside the overlay */
        #image-overlay-content {
            position: relative;
            text-align: center;
            max-width: 90%; /* Constrain overall content size */
            max-height: 90%; /* Constrain overall content size */
        }

        /* Close button */
        #close-overlay-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: var(--darkcamel);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            z-index: 10000; /* Above the image */
        }

        #close-overlay-btn:hover {
            background-color: var(--camel);
        }

        /* Image styling */
        #generated-image {
            max-width: 100%; /* Ensure the image scales within the container */
            max-height: 100%; /* Ensure the image scales within the container */
            border-radius: 10px; /* Optional rounded corners */
            object-fit: contain; /* Keep aspect ratio while fitting */
        }


        /* Loading overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading-gif {
            width: 100px; /* Adjust size as needed */
            height: 100px;
            animation: spin 1s linear infinite;
        }