:root {
  --privilegedcolor: rgba(0, 110, 255, 0.787);
  --targetcolor: rgba(160, 3, 251, 0.932);
}

.privileged-color {
  color: var(--privilegedcolor)
}

.target-color {
  color: var(--targetcolor)
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, sans-serif;
}


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

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

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


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

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


.tldr {
    word-wrap: break-word;
    text-align: center;
    font-size: 32px;
}

.gif-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  margin-bottom: 20px;
}

#blind-numb-gifs {
  grid-template-columns: repeat(4, 1fr);
}

#occluded-pick-place-gifs {
  grid-template-columns: repeat(3, 1fr);
}

#wrist-pick-place-gifs {
  grid-template-columns: repeat(3, 1fr);
}

#blind-deaf-piano-gifs {
  grid-template-columns: repeat(2, 1fr);
}

#blind-deaf-piano-gifs .gif-caption {
  margin-top: 20px;
}

.gif-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gif-cell img {
    width: 200px;
    height: auto;
    border-radius: 20px;
    /* border: 2px solid black; Add this line */
    box-shadow: 10px 5px 5px rgb(100, 100, 100);
}

.gif-cell video {
    width: 50%;
    height: auto;
    border-radius: 20px;
    /* border: 2px solid black; Add this line */
    box-shadow: 10px 5px 5px rgb(100, 100, 100);
}

.gif-cell .gif-caption-title {
    padding-top: 10px;
    word-wrap: break-word;
    text-align: center;
    font-size: 125%;
}
.gif-cell .gif-caption {
    word-wrap: break-word;
    text-align: left;
    margin-top: 20px;
}
.gif-cell .gif-title {
    word-wrap: break-word;
    text-align: center;
    font-size: 125%;
}
@media (max-width: 1000px) {
    .gif-table {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.publication-banner {
  max-height: parent;

}

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

.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 a {
   color: hsl(204, 86%, 53%) !important;
}

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

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

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

.env-visualizer {
  padding-top: 20px;
}

.env-visualizer .image-container {
  width:18%;
  position: relative;
  display: inline-block;
}

#info-container {
  padding-top: 20px;
}

.info-description {
  display: none;
  text-align: left;
}

.env-visualizer, #info-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.image-container, .info-description {
  margin: 10px;
}

.highlighted-image-container {
  display: grid;
  grid-template-columns: 1fr auto; /* This will create two columns: one for the caption and one for the image */
  align-items: start; /* This will align the items to the start of the container */
}


.spiral-search-gif {
  height: auto;
  width: 300px;
}

.behavior-image-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}

.behavior-image-container div {
  text-align: center;
}


.behavior-image-container img {
  height: 200px;
  width: auto;
  border-radius: 10px;
  box-shadow: 10px 5px 5px rgb(100, 100, 100);
}

.image-container p {
  text-align: center;
}

.env-image {
  width: 100%;
  border-radius: 20px;
}

.faded {
  opacity: 0.3;
}

.env-visualizer .image-overlay {
  position: absolute;
  bottom: 5;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 20px 20px 0 0;
}

#envs-carousel {
  overflow: hidden;
}

#envs-carousel .item {
  /* margin-bottom: 20px; */
  /* overflow: hidden; */
  /* border: 1px solid #bbb; */
  /* border-radius: 10px; */
  /* padding: 10; */
  font-size: 0;
}

#envs-carousel img {
  margin: 0px;
  width: 20vh; /* Set the width as 20% of the viewport height */
  height: 20vh; /* Set the height equal to the width */
  object-fit: cover; /* This will make sure the images cover the whole area without distortion */
  border-radius: 10%;
  box-shadow: 10px 5px 5px rgb(100, 100, 100);
}

.carousel-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.carousel-cell .gif-privileged-caption {
    padding-top: 10px;
    word-wrap: break-word;
    text-align: center;
    color: var(--privilegedcolor);
}
.carousel-cell .gif-caption {
    word-wrap: break-word;
    text-align: center;
    color: var(--targetcolor);
}
.carousel-cell .gif-title {
    word-wrap: break-word;
    text-align: center;
    font-size: 24px;
}

.gradient-text {
  background: linear-gradient(to right, var(--privilegedcolor), var(--targetcolor));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



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

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


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

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

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

#tableButton {
  background-color: var(--privilegedcolor);
}
#curveButton {
  background-color: var(--targetcolor);
}
.result-image {
  height: 400px;  /* adjust this value as needed */
  width: auto;
}