body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.publication-caption {
    font-size: 0.9em; /* Adjust as needed */
    color: #555; /* Adjust as needed */
    text-align: left !important; /* Or left, right */
    margin-top: 8px; /* Space between image and caption */
  }

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}

.interpolation-video-column {
}

.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}

.publication-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover; /* Adjust as needed, e.g., 'contain', 'fill' */
}

.publication-gif {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: contain; /* Better for GIFs to maintain aspect ratio */
    max-width: 100%;
    margin: 0 auto; /* Center the GIF */
}

/* Main container for the row of videos */
.video-wrapper {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
  justify-content: center; /* Center items if they don't fill the whole row */
  gap: 20px; /* Space between video items, adjust as needed */
  padding: 10px 0; /* Some vertical padding for the section */
}

/* Individual video item container */
.video-wrapper .video-item {
  flex: 1 1 280px; /* Flex-grow, flex-shrink, flex-basis. Items will try to be ~280px wide, but can grow or shrink. */
  max-width: calc(33.333% - 14px); /* Adjusts for 3 items per row with a 20px gap. (20px gap * 2 gaps) / 3 items = ~13.33px subtracted per item. */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  text-align: center; /* Center the video and caption text */
  background-color: #f8f8f8; /* Light background, similar to .interpolation-panel */
  border-radius: 10px; /* Consistent with .publication-video, .results-carousel .item */
  padding: 15px; /* Padding around the video and caption */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a bit of depth */
  display: flex; /* Using flex to easily manage video and caption stacking */
  flex-direction: column; /* Stack video and caption vertically */
  align-items: center; /* Center video and caption horizontally within the item */
}

/* Styling for the <video> element itself */
.video-wrapper .video-item video {
  width: 100%; /* Video takes full width of its .video-item container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 6px; /* Slightly smaller rounded corners for the video player */
  display: block; /* Remove any bottom spacing */
  margin-bottom: 10px; /* Space between video and caption */
}

/* Styling for the video caption */
.video-wrapper .video-item .video-caption {
  font-size: 0.9rem; /* Relative font size */
  color: #333; /* Dark grey for text, adjust as needed */
  font-weight: 600; /* Slightly bolder, similar to the effect of <b> */
  line-height: 1.4;
  margin-top: auto; /* Pushes caption to the bottom if items have varying heights */
}

/* Optional: Styling for the overall video section title if you use it */
.video-container > .video-title { /* Assuming .video-container is parent of .video-wrapper and the h4 title */
  text-align: center;
  margin-bottom: 20px; /* Space below the title */
  font-size: 1.5rem; /* Larger font size for a section title */
  font-weight: bold;
  font-family: 'Google Sans', sans-serif; /* Consistent with .publication-title */
}

/* Main container for the row of GIFs */
.gif-wrapper-3 {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
  justify-content: center; /* Center items if they don't fill the whole row */
  gap: 20px; /* Space between gif items, adjust as needed */
  padding: 10px 0; /* Some vertical padding for the section */
}

/* Individual gif item container */
.gif-wrapper-3 .gif-item {
  flex: 1 1 280px; /* Flex-grow, flex-shrink, flex-basis. Items will try to be ~280px wide, but can grow or shrink. */
  max-width: calc(33.333% - 14px); /* Adjusts for 3 items per row with a 20px gap. (20px gap * 2 gaps) / 3 items = ~13.33px subtracted per item. */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  text-align: center; /* Center the gif and caption text */
  background-color: #f8f8f8; /* Light background, similar to .interpolation-panel */
  border-radius: 10px; /* Consistent with .publication-video, .results-carousel .item */
  padding: 15px; /* Padding around the gif and caption */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a bit of depth */
  display: flex; /* Using flex to easily manage gif and caption stacking */
  flex-direction: column; /* Stack gif and caption vertically */
  align-items: center; /* Center gif and caption horizontally within the item */
}

/* Styling for the <img> (GIF) element itself */
.gif-wrapper-3 .gif-item img {
  width: 100%; /* GIF takes full width of its .gif-item container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 6px; /* Slightly smaller rounded corners for the gif */
  display: block; /* Remove any bottom spacing */
  margin-bottom: 10px; /* Space between gif and caption */
}

/* Styling for the gif caption */
.gif-wrapper-3 .gif-item .video-caption {
  font-size: 0.9rem; /* Relative font size */
  color: #333; /* Dark grey for text, adjust as needed */
  font-weight: 600; /* Slightly bolder, similar to the effect of <b> */
  line-height: 1.4;
  margin-top: auto; /* Pushes caption to the bottom if items have varying heights */
}

/* Optional: Styling for the overall gif section title if you use it */
.gif-container > .gif-title { /* Assuming .gif-container is parent of .gif-wrapper-3 and the h4 title */
  text-align: center;
  margin-bottom: 20px; /* Space below the title */
  font-size: 1.5rem; /* Larger font size for a section title */
  font-weight: bold;
  font-family: 'Google Sans', sans-serif; /* Consistent with .publication-title */
}

/* Main container for the HORIZONTAL row of GIFs */
.gif-wrapper {
    display: flex;
    /* Changed from flex-wrap: wrap; to nowrap to keep label and GIFs in one line */
    flex-wrap: nowrap; 
    /* Added align-items to vertically center the label and GIFs */
    align-items: center; 
    /* Changed from justify-content: center; to flex-start to align from left */
    justify-content: flex-start; 
    gap: 15px; /* Space between each GIF item and label. Adjust as needed. */
    padding: 2px 0; /* Vertical padding for the section */
}
  
.method-label {
    /* Fixed width but NO fixed height */
    width: 80px;
    
    /* Center the text both vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Text styling */
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    text-align: center;
    
    /* Prevent shrinking */
    flex: 0 0 80px;
}

  /* Individual GIF item container in the HORIZONTAL row */
  .gif-wrapper .gif-item {
    /* Adjusted flex properties and max-width for 5 items + label */
    flex: 1 1 0; /* Allows items to grow and shrink equally, from a basis of 0 */
    /* 
      Calculation for max-width:
      - 100% is the total width of .gif-wrapper.
      - 120px is the width of .method-label.
      - 10px is the margin-right of .method-label.
      - (4 * 15px) = 60px is the total gap between 5 GIF items.
      - So, (100% - 120px - 10px - 60px) / 5
      - This calculation might be too complex for direct CSS, better to rely on flex-grow.
      - A simpler approach for max-width if needed, or let flexbox handle it.
      - For simplicity, let's make them try to be equal, flex handles the rest.
    */
    max-width: calc((100% - 120px - 10px - (4 * 15px)) / 5); /* Distribute remaining space among 5 GIFs */
    box-sizing: border-box; 
    background-color: #dff5e5; 
    border-radius: 8px; 
    padding: 10px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  }

  .gif-wrapper .gif-item-wrong {
    /* Adjusted flex properties and max-width, same as .gif-item */
    flex: 1 1 0; 
    max-width: calc((100% - 120px - 10px - (4 * 15px)) / 5); /* Distribute remaining space among 5 GIFs */
    box-sizing: border-box; 
    background-color: #eed4d4; 
    border-radius: 8px; 
    padding: 10px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
  
  /* Styling for the <img> (GIF) element itself */
  .gif-wrapper .gif-item img,
.gif-wrapper .gif-item-wrong img { /* Applied to both correct and wrong items */
  max-width: 100%;
  max-height: 256px;
  height: auto;
  border-radius: 4px;
  display: block;
}

.gif-wrapper .gif-item video,
.gif-wrapper .gif-item-wrong video { /* Applied to both correct and wrong items */
  max-width: 100%;
  max-height: 256px;
  height: auto;
  border-radius: 4px;
  display: block;
}