/* 1. UNIFIED VARIABLES */
:root {
   --primary: #2563eb;
   --primary-hover: #1d4ed8;
   --bg-light: #f9fafb;
   --text-main: #1f2937;
   --text-muted: #4b5563;
   --border-color: #e5e7eb;
   --white: #ffffff;
   --transition-speed: 0.3s;
}

/* 2. GLOBAL STYLES */
body {
   font-family: 'Inter', sans-serif;
   background-color: var(--bg-light);
   color: var(--text-main);
   margin: 0;
   -webkit-font-smoothing: antialiased;
}

/* 3. TOOL & CONTENT SPECIFICS */
.tool-container {
   text-align: center;
   padding: 60px 20px;
}

.guid-box {
   font-family: 'JetBrains Mono', monospace;
   font-size: 1.5rem;
   background: var(--white);
   border: 2px solid var(--border-color);
   padding: 20px;
   border-radius: 12px;
   display: inline-block;
   margin-bottom: 20px;
   min-width: 350px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.btn-generate {
   background: var(--primary);
   color: white;
   padding: 12px 24px;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
}

   .btn-generate:hover {
      background: var(--primary-hover);
   }

.content-section, .guide-container {
   max-width: 800px;
   margin: 40px auto;
   padding: 0 20px;
   line-height: 1.7;
}

h1, h2 {
   color: #111827;
}

/* 4. FOOTER */
footer {
   text-align: center;
   padding: 40px;
   background: var(--white);
   border-top: 1px solid var(--border-color);
   margin-top: 50px;
}

.footer-links a {
   color: var(--primary);
   text-decoration: none;
   font-size: 0.9rem;
}

.has-tooltip {
   cursor: help;
}


.txtFortune-light {
   margin-top: 4pt;
   background-color: white;
   padding-left: 20pt;
   border-radius: 8pt;
   border: gray thin solid;
   color: black;
   /*font-family: ui-monospace, SFMono-Regular, monospace,
            Andale Mono,Courier; */ /*font-size: 12.5pt;*/
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11.5pt;
   padding: 10px 15px 12px 15px;
   /*min-height: 13.5pt;*/
   /* 1. Force the container to be a specific width 
          so it NEVER resizes regardless of the text inside. */
   width: 100%;
   max-width: 500px; /* Set this to the width you want the box to be */
   /* 2. Keep the text aligned to the left INSIDE that box */
   text-align: left;
   /* 3. Center the BOX itself on the page, but keep the TEXT left-aligned */
   margin-left: auto;
   margin-right: auto;
   /* 4. Prevent vertical jumping */
   min-height: 3em;
   /* 5. Ensure long lines don't push the box wider than the max-width */
   word-wrap: break-word;
   overflow-wrap: break-word;
}


.txtFortune-dark {
   /* 1. THE MOST IMPORTANT LINE: */
   box-sizing: border-box;
   /* 2. Fixed width - now it will be EXACTLY 600px regardless of padding */
   width: 600px;
   /* Your existing styles */
   margin-top: 4pt;
   background-color: #242424;
   border-radius: 8pt;
   border: lawngreen 2px solid;
   color: lawngreen;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11.5pt;
   /* This padding is now INSIDE the 600px */
   padding: 10px 15px 12px 15px;
   /* Keep the text left-aligned and locked */
   text-align: left;
   margin-left: 0;
   /* Prevent content from pushing the box wider */
   word-wrap: break-word;
   overflow-wrap: break-word;
   min-height: 3em;
}



.page-container {
   /* Use a fixed width. DO NOT use 'auto' or '%'. 
       Pick a width that fits your widest element (the textarea). */
   width: 750px;
   /* This is the most important line: it prevents padding/borders 
       from adding to the width and causing shifts */
   box-sizing: border-box;
   /* Lock it to the left */
   margin-left: 0;
   margin-right: auto;
   /* Force everything inside to stay left */
   text-align: left;
   /* Prevent the container from expanding if content is too wide */
   overflow-x: hidden;
}



.txtResults {
   width: 700px; /* Match the width of your page-container */
   display: block;
   box-sizing: border-box;
}



.fortune-img {
   width: 40em; /* Replace with your actual image width in pixels */
   height: 3em; /* Replace with your actual image height in pixels */
   object-fit: contain;
}

.xxx {
   display: block !important;
   margin-left: 0 !important;
   margin-right: auto !important;
   /* This removes any possible indentation from the browser's default styles */
   padding-left: 0 !important;
   object-fit: contain;
}