<style>
  .image-container {
    display: flex;
    justify-content: center; /* Centers the images */
    gap: 50px;              /* Adds space between them */
  }

  .image-container img {
    width: 45%;             /* Adjusts size to fit two per row */
    height: auto;           /* Maintains aspect ratio */
  }
</style>

<style>
  model-viewer {
    width: 100%;
    height: 500px; /* Or whatever height you prefer */
    background-color: #f0f0f0;
  }
</style>

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    }
  };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
/* css styles */

/* Target the container of the images in a layout grid */
.quarto-layout-cell img {
  margin-bottom: 20px !important;
  border: 1px solid #eee; /* Optional: adds a nice subtle border to see the edges */
}

/* Ensure the figure captions don't hug the next section */
.quarto-figure {
  margin-top: 20px;
  margin-bottom: 30px !important;
}

/* custom.css */
.reveal blockquote {
  font-family: "Georgia", serif;
  font-style: italic;
  color: #333;
  border-left: 5px solid #ccc; /* optional customization */
}

