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;
}

.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;
}

/* A fixed 16:9 box, used by the teaser row and the results grid: every item
   renders at the same size whatever its source aspect ratio is, so cells and
   captions line up. The ratio comes from padding-top rather than
   aspect-ratio, because percentage padding resolves against the parent's
   definite width -- which holds even where aspect-ratio on a replaced element,
   <video> especially, does not. 16:9 is exact for the input frames, trims ~1%
   off the clips' sides and a little empty black off the point maps. */
.media-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.media-16x9 > img,
.media-16x9 > video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teaser row */
.teaser-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.teaser-item {
  width: 300px;
  max-width: 100%;
  text-align: center;
}

/* Results grid: one row per scene, one column per output. */
.results-grid {
  display: grid;
  grid-template-columns: 7rem repeat(3, 1fr);
  gap: 12px;
  align-items: center;
}

.results-grid-head {
  text-align: center;
  font-weight: 600;
}

/* Scene names; the colours are the ones Figure 2 of the paper uses. */
.results-grid-label {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: right;
  padding-right: 0.5rem;
}

@media screen and (max-width: 768px) {
  /* Too narrow for a label column: each scene name becomes a full-width
     heading above its own row of three. */
  .results-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .results-grid-corner {
    display: none;
  }

  .results-grid-label {
    grid-column: 1 / -1;
    text-align: center;
    padding-right: 0;
    margin-top: 0.75rem;
  }
}

/* bulma forces links inside a coloured hero to color: inherit via a selector
   specific enough (0,7,1) to beat anything reasonable here, which leaves an
   attribution or reference link looking like plain body text. Put them back on
   the blue the author links already use. */
.hero.is-light .content a {
  color: hsl(204, 86%, 53%) !important;
}

.hero.is-light .content a:hover {
  text-decoration: underline;
}