.termynal-comment {
    color: #4a968f;
    font-style: italic;
    display: block;
  }
  
  .termy {
    /* For right to left languages */
    direction: ltr;
  }
  
  .termy [data-termynal] {
    white-space: pre-wrap;
  }
  
  .termy .linenos {
    display: none;
  }
  
  a.external-link {
    /* For right to left languages */
    direction: ltr;
    display: inline-block;
  }
  
  a.external-link::after {
    /* \00A0 is a non-breaking space
          to make the mark be on the same line as the link
      */
    content: "\00A0[↪]";
  }
  
  a.internal-link::after {
    /* \00A0 is a non-breaking space
          to make the mark be on the same line as the link
      */
    content: "\00A0↪";
  }
  
  .shadow {
    box-shadow: 5px 5px 10px #999;
  }
  
  /* Give space to lower icons so Gitter chat doesn't get on top of them */
  .md-footer-meta {
    padding-bottom: 2em;
  }
  
  .user-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  
  .user-list-center {
    justify-content: space-evenly;
  }
  
  .user {
    margin: 1em;
    min-width: 7em;
  }
  
  .user .avatar-wrapper {
    width: 80px;
    height: 80px;
    margin: 10px auto;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
  }
  
  .user .avatar-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .user .title {
    text-align: center;
  }
  
  .user .count {
    font-size: 80%;
    text-align: center;
  }
  
  a.announce-link:link,
  a.announce-link:visited {
    color: #fff;
  }
  
  a.announce-link:hover {
    color: var(--md-accent-fg-color);
  }
  
  .announce-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .announce-wrapper div.item {
    display: none;
  }
  
  .announce-wrapper .sponsor-badge {
    display: block;
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 0.5rem;
    color: #999;
    background-color: #666;
    border-radius: 10px;
    padding: 0 10px;
    z-index: 10;
  }
  
  .announce-wrapper .sponsor-image {
    display: block;
    border-radius: 20px;
  }
  
  .announce-wrapper>div {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  
  .twitter {
    color: #00acee;
  }
  
  /* Right to left languages */
  code {
    direction: ltr;
    display: inline-block;
  }
  
  .illustration {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  /* Screenshots */
  /*
  Simulate a browser window frame.
  Inspired by Termynal's CSS tricks with modifications
  */
  
  .screenshot {
    display: block;
    background-color: #d3e0de;
    border-radius: 4px;
    padding: 45px 5px 5px;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  .screenshot img {
    display: block;
    border-radius: 2px;
  }
  
  .screenshot:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /* A little hack to display the window buttons in one pseudo element. */
    background: #d9515d;
    -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
            box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
  }

  /* Space black theme for dark mode */
  [data-md-color-scheme="slate"] {
    --md-default-bg-color: #000000;
    --md-default-fg-color: #ffffff;
    --md-default-fg-color--light: #ffffff;
    --md-default-fg-color--lighter: rgba(255, 255, 255, 0.7);
    --md-default-fg-color--lightest: rgba(255, 255, 255, 0.5);
    
    /* Navigation */
    --md-primary-fg-color: #000000;
    --md-primary-fg-color--light: #000000;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffff;
    
    /* Accent colors */
    --md-accent-fg-color: #ffffff;
    
    /* Code blocks */
    --md-code-bg-color: #121212;
    --md-code-fg-color: #ffffff;
    
    /* Links */
    --md-typeset-a-color: #ffffff;
    
    /* Footer */
    --md-footer-bg-color: #000000;
    --md-footer-bg-color--dark: #000000;
    --md-footer-fg-color: #ffffff;
    --md-footer-fg-color--light: rgba(255, 255, 255, 0.7);
    
    /* Search */
    --md-search-bg-color: #000000;
    --md-search-fg-color: #ffffff;
    
    /* Header specific styling */
    --md-header-bg-color: #000000;
    --md-header-fg-color: #ffffff;
    --md-header-fg-color--transparent: #ffffff;
  }

  /* Adjust sidebar navigation for better contrast */
  [data-md-color-scheme="slate"] .md-nav__link {
    color: rgba(255, 255, 255, 0.9);
  }

  [data-md-color-scheme="slate"] .md-nav__link:hover {
    color: #ffffff;
  }

  /* Adjust table styles for better contrast */
  [data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    background-color: #121212;
    border-color: rgba(255, 255, 255, 0.1);
  }

  [data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background-color: #000000;
    color: #ffffff;
  }

  /* Ensure header is black in light mode */
  [data-md-color-scheme="default"] {
    --md-primary-fg-color: #000000;
    --md-primary-fg-color--light: #000000;
    --md-primary-fg-color--dark: #000000;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffff;
    
    /* Accent colors */
    --md-accent-fg-color: #000000;
    
    /* Header specific styling */
    --md-header-bg-color: #000000;
    --md-header-fg-color: #ffffff;
    --md-header-fg-color--transparent: #ffffff;
    
    /* Make top-level headers black in light mode */
    --md-typeset-h1-color: #000000;
    --md-typeset-h2-color: #000000;
  }

  /* Additional styling for headers in light mode */
  [data-md-color-scheme="default"] .md-typeset h1,
  [data-md-color-scheme="default"] .md-typeset h2 {
    color: #000000 !important;
    font-weight: bold;
  }

  /* Force header to be black regardless of theme */
  .md-header {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Make the navigation tabs/menu bar black */
  .md-tabs {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .md-tabs__link {
    color: #ffffff !important;
    opacity: 0.7;
  }

  .md-tabs__link--active,
  .md-tabs__link:hover {
    color: #ffffff !important;
    opacity: 1;
  }

  .md-header__button.md-logo {
    color: #ffffff !important;
  }

  .md-header__button {
    color: #ffffff !important;
  }

  .md-search__input {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Fix "back to top" button in dark mode */
  [data-md-color-scheme="slate"] .md-top {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
  }

  [data-md-color-scheme="slate"] .md-top:hover,
  [data-md-color-scheme="slate"] .md-top:focus {
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff !important;
  }

  /* Make the logo visible in dark mode by inverting its colors */
  [data-md-color-scheme="slate"] img[src$="tiptree-logo-white-on-black.svg"] {
    filter: none;
  }

  /* Ensure the logo is visible in light mode (default behavior) */
  [data-md-color-scheme="default"] img[src$="tiptree-logo-white-on-black.svg"] {
    filter: none;
  }

  /* Ensure footer is completely dark in both light and dark modes */
  .md-footer {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .md-footer-meta {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding-bottom: 2em;
  }

  .md-footer-nav {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Ensure footer links are properly visible */
  .md-footer a {
    color: #ffffff !important;
    opacity: 0.7;
  }

  .md-footer a:hover {
    color: #ffffff !important;
    opacity: 1;
  }

  /* Make sure any footer dividers or borders are dark as well */
  .md-footer hr, 
  .md-footer .md-footer-nav__link {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Ensure the "Next" and "Previous" navigation in footer is styled correctly */
  .md-footer-nav__direction {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Ensure any footer icons are visible */
  .md-footer .md-icon {
    color: #ffffff !important;
  }