/* These styles apply to the entire page. */




   h1 {
       font-size: 2.5em;
       /* Large font size for main headings */
       color: #DAA520;
       /* Hint of gold for heading color */
       margin-bottom: 20px;
       /* Space below the heading */
       text-align: center;
       /* Center the heading text */
   }

   p {
       font-size: 1.1em;
       /* Slightly larger font size for paragraphs */
       color: #333;
       /* Default text color for paragraphs */
       max-width: 800px;
       /* Limit the maximum width of paragraphs */
       margin-bottom: 40px;
       /* Space below paragraphs */
   }

   .p-light,
   .p-white {
       font-size: 1.1em;
       /* Slightly larger font size */
       margin: 0 5px 10px 0;
       /* Space around paragraphs */
       max-width: none;
       /* Remove max-width to allow them to sit side by side */
   }

   .p-light {
       color: #c7c7c7;
       /* Light text color */
   }

   .p-white {
       color: #ffffff;
       /* White text color */
   }

   form {
       margin-bottom: 20px;
       /* Space below the form */
   }

   select {
       padding: 5px;
       /* Padding inside the select dropdown */
       font-size: 1em;
       /* Font size for the dropdown text */
       border-radius: 5px;
       /* Rounded corners for the dropdown */
       border: 1px solid #bdc3c7;
       /* Light border for the dropdown */
   }

   .image-1024 {
       max-width: 100%;
       /* Ensure the image is responsive */
       height: auto;
       /* Maintain aspect ratio of the image */
       width: 1024px;
       /* Set the width for larger screens */
       object-fit: cover;
       /* Prevent image distortion */
   }


   /* These styles define the layout and appearance of the data cards on the site. */


   .mempool-container {
       display: flex;
       /* Use flexbox layout */
       flex-wrap: wrap;
       /* Allow items to wrap to the next line */
       justify-content: center;
       /* Center the container's content */
       gap: 10px;
       /* Space between cards in the container */
   }

   .mempool-card {
       background: rgba(0, 0, 0, 0.5);
       /* Black with 50% opacity */
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       padding: 10px;
       width: 100%;
       /* Set width to 100% to use full width of the container */
       max-width: 250px;
       /* Constrain maximum width to 300px */
       min-width: 200px;
       /* Constrain maximum width to 300px */
       text-align: center;
       transition: transform 0.3s ease;
       margin: 0 auto;
       /* Center the card */
   }

   .container:hover {
       transform: translateY(-10px);
       /* Lift the card slightly on hover */
   }



   .mempool-card p {
       font-size: 1.1em;
       /* Font size for text within cards */
       margin: 10px 0;
       /* Space above and below paragraphs in cards */
   }


   /* These styles define the layout and appearance of the data cards LARGE. */

   .mempool-largecard {
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       padding: 10px;
       width: 100%;
       /* Set width to 100% to use full width of the container */
       max-width: 600px;
       /* Constrain maximum width to 600px */
       text-align: center;
       transition: transform 0.3s ease;
       margin: 0 auto;
       /* Center the large card */
   }

   .mempool-largecard:hover {
       transform: translateY(-10px);
       /* Lift the card slightly on hover */
   }

   .mempool-largecard h2 {
       font-size: 1.8em;
       /* Large font size for card headings */
       margin-bottom: 10px;
       /* Space below the heading */
       color: #DAA520;
       /* Hint of gold for heading color */
   }

   .mempool-largecard .icon {
       font-size: 1.5em;
       /* Icon size within card headings */
       margin-right: 5px;
       /* Space between icon and text */
   }

   .mempool-largecard p {
       font-size: 1.1em;
       /* Font size for text within cards */
       margin: 10px 0;
       /* Space above and below paragraphs in cards */
       color: #333;
       /* Default text color */
   }

   .mempool-largecard .price {
       font-size: 1.5em;
       /* Larger font size for price information */
       color: #DAA520;
       /* Gold color to highlight the price */
   }


   /* These styles manage the appearance and behavior of the day/night mode toggle. */

   .theme-toggle-icon {
       position: fixed;
       top: 20px;
       /* Position the icon at the top */
       right: 20px;
       /* Position the icon at the right */
       font-size: 1.5em;
       /* Set icon size */
       color: #DAA520;
       /* Gold color for the icon */
       cursor: pointer;
       /* Change cursor to pointer on hover */
       z-index: 1000;
       /* Ensure icon appears above other content */
       transition: color 0.3s ease;
       /* Smooth transition for color change */
   }

   /* Add margin to the toggle button */
   .theme-toggle {
       position: fixed;
       top: 20px;
       /* Position the toggle button at the top */
       right: 20px;
       /* Position the toggle button at the right */
       padding: 10px 20px;
       /* Internal padding for the button */
       background-color: #DAA520;
       /* Gold background for the button */
       border: none;
       /* Remove border */
       border-radius: 5px;
       /* Rounded corners for the button */
       cursor: pointer;
       /* Change cursor to pointer on hover */
       font-size: 1em;
       /* Set font size for button text */
       color: white;
       /* White text color */
       transition: background-color 0.3s ease, color 0.3s ease;
       /* Smooth transition for background and text color changes */
   }

   .theme-toggle:hover {
       background-color: #FFD700;
       /* Change background color on hover */
   }


   .main-intro {
       font-size: 1.1rem;
       color: #fff;
       text-align: center;
       /* Centers the text horizontally */
       width: 100%;
       /* Uses all the space available within the frame */
       box-sizing: border-box;
       /* Includes padding and border in the element's width and height */
       margin: 0 auto;
       /* Centers the block element if it has a fixed width */
       padding: 1rem 1rem;
       /* Optional: Adds padding to avoid text touching the edges */
   }


   .profile-title {
       font-size: 1.8rem;
       color: #ffcc00;
       text-align: center;
   }


   /* These media queries ensure the design adapts to smaller screen sizes (e.g., mobile devices). */

   /* Responsive Design */
   @media (max-width: 768px) {
       h1 {
           font-size: 2em;
           /* Reduce font size for smaller screens */
       }

       p {
           font-size: 1em;
           /* Reduce paragraph font size for smaller screens */
       }

       .mempool-container {
           flex-direction: column;
           /* Stack cards vertically on small screens */
           align-items: center;
           /* Center the cards */
       }

       .mempool-card {
           max-width: 100%;
           /* Ensure cards take full width on small screens */
       }

       .theme-toggle-icon {
           top: 10px;
           /* Lower the icon slightly on mobile */
           font-size: 1.2em;
           /* Reduce the icon size slightly */
       }

       .theme-toggle {
           top: 60px;
           /* Increase top spacing to prevent overlap */
           right: 20px;
       }
   }


   /* Mining Table */
   .table-container {
       width: 100%;
       margin-top: 15px;
       margin-bottom: 15px;
   }

   .table-container th,
   .table-container td {
       min-width: 60px;
       text-align: center;
       padding: 10px;
       vertical-align: middle;
   }

   .table-container th {
       font-weight: bold;
   }


   /* Input field for Transaction ID */
   .txid-input {
       width: 100%;
       /* Full width */
       padding: 10px;
       /* Padding for better appearance */
       font-size: 1em;
       /* Font size */
       border-radius: 5px;
       /* Rounded corners */
       border: 1px solid #bdc3c7;
       /* Border color */
       margin-top: 10px;
       /* Space between label and input */
       box-sizing: border-box;
       /* Ensure padding and border are included in width */
   }

   /* Button for checking transaction status */
   .check-status-btn {
       margin-top: 15px;
       /* Space above the button */
       padding: 10px 20px;
       /* Padding for a larger button */
       font-size: 1.1em;
       /* Slightly larger font size */
       border-radius: 5px;
       /* Rounded corners */
       background-color: #DAA520;
       /* Button background color */
       color: white;
       /* Button text color */
       border: none;
       /* Remove default border */
       cursor: pointer;
       /* Pointer cursor on hover */
       transition: background-color 0.3s ease;
       /* Smooth transition for hover effect */
   }

   /* Button hover effect */
   .check-status-btn:hover {
       background-color: #FFD700;
       /* Lighter gold on hover */
   }