/* Style for box around pictures */
 .md-content img {
    border-width: 2px; /* Adjust thickness as needed */
    border-style: solid;
    border-color: #b5d1fe; /* Box color */
    padding: 12px; /* Optional: Add padding inside the border */
    background-color: #f0f8ff; /* Optional: Add a background color */
    border-radius: 2px; /* Optional: Add rounded corners */
  }

  /* Style for box around pictures in dark theme */
  [data-md-color-scheme="dark"] .md-content img {
    border-color: #4a90e2; /* Adjusted box color for dark theme */
    background-color: #1a1a1a; /* Dark background color */
  }

  /* Style for box around code blocks */
  .md-content code {
    border-width: 2px; /* Adjust thickness as needed */
    border-style: solid;
    border-color: #b5d1fe; /* Box color */
    padding: 12px; /* Optional: Add padding inside the border */
    background-color: #f0f8ff; /* Optional: Add a background color */
    border-radius: 2px; /* Optional: Add rounded corners */
    color: #000; /* Ensure text is visible in light theme */
    font-weight: 500; /* Improve visibility of characters */
    font-family: monospace, "Courier New", Courier; /* Use a clear monospace font */
  }

  /* Style for box around code blocks in dark theme */
  [data-md-color-scheme="dark"] .md-content code {
    border-color: #4a90e2; /* Adjusted box color for dark theme */
    background-color: #1a1a1a; /* Dark background color */
    color: #e6e6e6; /* Highly visible text color for dark theme */
    font-weight: 700; /* Increase font weight for better visibility */
    font-family: monospace, "Courier New", Courier; /* Use a clear monospace font */
    text-shadow: 0 0 2px #000; /* Add subtle text shadow for better contrast */
  }

  /* Style for Mermaid diagrams */
  .mermaid {
    border-width: 2px; /* Adjust thickness as needed */
    border-style: solid;
    border-color: #b5d1fe; /* Box color */
    padding: 12px; /* Optional: Add padding inside the border */
    border-radius: 2px; /* Optional: Add rounded corners */
  }