<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 */
}

/* allows images on the title slide */
h1.title {
  min-height: 500px; /* Give the images room to exist */
  display: block;   /* Ensure it's a block-level element */
  background-image: url(assets/uv_checkerboard.png), url(assets/cat_96.png), url(assets/qr_code_cat_slides.png);
  background-repeat: no-repeat;
  background-position: 10% 75%, 90% 75%, 50% 95%; /* Adjusts the position of each image */
  background-size: 200px, 200px, 150px;
}

.highlighted {
  background-color: rgba(255, 255, 0, 0.4);
}

<style>
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 rgba(38, 139, 210, 0.7); transform: scale(1); }
70% { box-shadow: 0 0 0 20px rgba(38, 139, 210, 0); transform: scale(1.05); }
100% { box-shadow: 0 0 0 0 rgba(38, 139, 210, 0); transform: scale(1); }
}

.glow-button {
animation: pulse-glow 2s infinite;
border-radius: 15px;
display: block;
}
</style>


