:root {

    [data-md-color-scheme="light"]  {
      --md-primary-fg-color:               #585861;
      --md-primary-bg-color:               #e1e1e1;
      --md-accent-fg-color:                #ff2d3b;
      --md-accent-fg-color--transparent:   #ff2d3b;
      --md-accent-bg-color:                #ff2d3b;
      --md-table-bg-color:                 #e1e1e1; /* Custom table background color for light mode */
    }
  
  [data-md-color-scheme="dark"]  {
      --md-default-bg-color:               #2e343c;
      --md-default-fg-color:               #e1e1e1;
      --md-primary-fg-color:               #ff2d3b;
      --md-primary-bg-color:               #e1e1e1;
      --md-accent-fg-color:                #295476;
      --md-accent-fg-color--transparent:   #295476;
      --md-accent-bg-color:                #295476;
      --md-text-color:                     #e1e1e1; /* Added custom font color */
      --md-link-color:                     #ff2d3b; /* Custom link color for dark mode */
      --md-header-link-color:              #e1e1e1; /* Custom link color for header in dark mode */
      --md-table-bg-color:                 #e1e1e1; /* Custom table background color for dark mode */
      --md-table-fg-color:                 #2e343c;/* Custom table font color for dark mode */
    }
  
  /* General text color in dark mode */
  body[data-md-color-scheme="dark"],
  body[data-md-color-scheme="dark"] p,
  body[data-md-color-scheme="dark"] span,
  body[data-md-color-scheme="dark"] h1,
  body[data-md-color-scheme="dark"] h2,
  body[data-md-color-scheme="dark"] h3,
  body[data-md-color-scheme="dark"] h4,
  body[data-md-color-scheme="dark"] h5,
  body[data-md-color-scheme="dark"] h6,
  body[data-md-color-scheme="dark"] .md-nav__link,
  body[data-md-color-scheme="dark"] .md-footer,
  body[data-md-color-scheme="dark"] .md-typeset code {
      color: var(--md-default-fg-color); /* Use the custom font color */
  }
  
/* Link color in dark mode */
body[data-md-color-scheme="dark"] a {
     color: var(--md-link-color); /* Use the custom link color */
 }
  
/* Link hover color in dark mode */
 body[data-md-color-scheme="dark"] a:hover {
     color: lighten(var(--md-link-color), 20%); /* Lighter link color on hover */
 }

 /* Link color in header in dark mode */
body[data-md-color-scheme="dark"] .md-header a {
 color: var(--md-header-link-color); /* Use the custom header link color */
}

/* Link hover color in header in dark mode */
body[data-md-color-scheme="dark"] .md-header a:hover {
  color: lighten(var(--md-header-link-color), 20%); /* Lighter header link color on hover */
}

/* Custom text color for 'Table of contents' header in dark mode */
body[data-md-color-scheme="dark"] .md-nav__title {
  color: lighten(var(--md-header-link-color), 20%);
}

.grid.cards {
  display: grid;
  gap: 1rem; /* Adjust spacing between grid items */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
}

}