.reveal .slides section {
    top: 3% ;
    /* transform: translateY(0%) !important; */
}

/* Remove ALL CAPS from slide titles */
/* .reveal h1, */
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    text-transform: none;
}

/* Custom styling for centering content when h1 is used */
.reveal .slides section h1 {
    text-align: center ; /* Center the h1 text */
    margin-bottom: 1rem; /* Add some spacing below h1 */
}

.reveal .slides section h1 ~ * {
    text-align: center; /* Center all sibling elements of h1 */
    margin: 0 auto; /* Center block elements */
    display: block; /* Ensure inline alignment works for text and block elements */
}
.reveal .slides section h3 ~ * {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Custom paragraph sizes */
.text-large {
    font-size: 2em;
}
.text-small {
    font-size: 0.6em;
}

/* Alignment control */
.align-left {
    text-align: left !important;
    margin-left: 0 ; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
}
.align-center {
    text-align: center;
}

/* Comprehensive Code Block Styling */
.reveal pre {
    width: 100%;
    max-height: none !important;
    font-size: 0.4em !important;
    line-height: 1.2;
    padding: 7px !important;
    background-color: #f0f0f0 !important;
    border: none !important;
    box-shadow: none !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.reveal pre code {
    max-height: none !important;
    background: #f0f0f0 !important;
    padding: 5px !important;
    border-radius: 4px !important;
    font-size: 0.8em !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}


.reveal h1 { font-size: 2.1em; }
.reveal h2 { font-size: 1.8em; }
.reveal h3 { font-size: 1.3em; }

.footnote {
    font-size: 0.5em;
    color: gray;
    display: block;  
    /* margin-top: 20px;   */
    margin-bottom: 10px;  
    text-align: left;  
}

.reveal iframe {
    width: 100%;
    height: 550px;
    border: none;
    display: block; /* Makes iframe a block element, so it respects width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    box-sizing: border-box; /* Includes padding and border in the width */
}

.reveal .slides section {
    display: flex !important;
    flex-direction: column !important;
    /* justify-content: center !important; */
    align-items: center !important;
    text-align: center !important ;  
    height: 100% !important;
    width: 100% !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.reveal .slides section > :first-child {
    margin-bottom: 0.5em !important;
    width: 100% !important;
}

.reveal img, .reveal svg {
    display: block;
    width: auto !important;
    height: 100% !important;
    max-width: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}


/* Two-Column Layout */
.two-column {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .column {
    flex: 1;
    padding: 10px;
    overflow-x: auto; /* Enable horizontal scrolling */
    /* Set a fixed width if desired */
    width: 500px;
  }
  /* Centering the Title */
  .reveal .slides section h2 {
    text-align: center;
    margin-bottom: 20px; /* Adjust margin as needed */
  }

/* Make Mermaid diagrams expand to fill slide */
.reveal .slides section .mermaid {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
}

.reveal .slides section .mermaid svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;  /* or remove this line entirely */
    display: block !important;
    transform-origin: center !important;
    margin: 0 auto !important;
}

  
  /* Target the specific rendered Mermaid diagram wrapper */
  .reveal .slides section .mermaid > svg {
    min-width: 70% !important; /* Ensure diagrams have some minimum width */
  }
  
  /* Fix for specific Mermaid components */
  .reveal .slides section .mermaid .node rect,
  .reveal .slides section .mermaid .node circle,
  .reveal .slides section .mermaid .node ellipse,
  .reveal .slides section .mermaid .node polygon,
  .reveal .slides section .mermaid .cluster rect {
    stroke-width: 2px !important;
  }
  
  /* Make text more readable */
  .reveal .slides section .mermaid .label {
    font-size: 16px !important;
  }
  
  /* Important override for graph and flowchart types */
  .reveal .slides section .mermaid[id^="mermaid-"] {
    transform: scale(1.1) !important; /* Slightly scale up all diagrams */
  }

  /* Markdown Table Styling */
.reveal .slides section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important; /* Full slide height */
  }
  
  .reveal table {
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    max-height: 160vh; /* ← Control how much vertical space the table uses */
    border-collapse: collapse !important;
    font-size: 0.6em !important;
    table-layout: auto !important;
    color: inherit;
    margin: 0 auto !important;
  }
  
  .reveal table th,
  .reveal table td {
    border: 1px solid currentColor !important;
    padding: 4px 8px !important;
    text-align: left;
    white-space: normal !important;
    vertical-align: top;
    color: inherit;
  }
  
  .reveal .slides table {
    display: block;
    overflow-y: auto;
    overflow-x: auto;
  }