h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

@media (max-width: 768px) {
    .results-figure img {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        max-width: none;
        cursor: zoom-in;
    }
    
    .results-figure figcaption {
        padding: 0.5em 1em;
    }
}

/* Make all math blocks scrollable horizontally only */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  white-space: nowrap;  /* Prevent wrapping */
}

/* Alternative if you're using MathJax */
.MathJax_Display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  white-space: nowrap;
}

.figure-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.figure-container img {
    width: 50%;
}

.mobile-caption {
    display: none;
}

@media (max-width: 768px) {
    .figure-container {
        flex-direction: column;
        align-items: center;
    }
    
    .figure-container img {
        width: 100%;
    }
    
    .desktop-caption {
        display: none;
    }
    
    .mobile-caption {
        display: block;
    }
}






#random-video-grid {
    display: grid;
    /* Creates 7 equal-width columns */
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    padding: 0;
    margin: 0;
    /* A dark background in case of any tiny pixel gaps */
    background-color: #000;
  }
  
  #random-video-grid video {
    width: 100%;
    /* This is the key: makes the video element square */
    aspect-ratio: 1 / 1;
    /* This ensures the video fills the square, cropping as needed */
    object-fit: cover;
    display: block;
    padding: 0;
    margin: 0;
  }
  
  /* Extra rule to forcefully hide controls in WebKit browsers */
  #random-video-grid video::-webkit-media-controls {
    display: none !important;
  }