body {
    margin: 0 auto;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 18px;
}

.row {
  display: flex;
}

.row_v2 {
    display: flex;
    place-items: center;
  }

.column {
  flex: 33.33%;
  padding: 5px;
}

.cropped {
    width: 100%; /* width of container */
    height: 270px; /* height of container */
    overflow: hidden;
}

.cropped_v2 {
    width: 100%; /* width of container */
    height: 230; /* height of container */
    overflow: hidden;
}

.cropped img {
    margin: -10px -50px -10px -50px;
}

.cropped_v2 img {
    margin: -40px -100px -40px -100px;
}

.box{
    width: 850px;
    height: 75px;
    border: 2px solid rgb(77, 77, 77);
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    text-align: center;
    display: block;
}

.title {
    font-size: 36px;
    margin-top: 20px;
    width: 90%;
}

.venue {
    font-size: 22px;
    margin-top: 20px;
    width: 90%;
}

.author {
    width: 95%;
    max-width: 200px;
    font-size: 20px;
}

.affiliation {
    font-size: 20px;
    width: 95%;
    max-width: 1000px;
}

.links {
    font-size: 22px;
    width: 95%;
    max-width: 200px;
}

.paper-thumbnail {
    margin: 0 auto;
    width: 30%;
    max-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 2% 10% 4% 0;
}

.paper-info {
    width: 45%;
    display: inline-block;
    vertical-align: top;
}

@media (max-width: 999px) {
    .paper-thumbnail {
        width: 60%;
    }

    .paper-info {
        width: 80%;
    }
}


p {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 10px;
}

h1 {
    font-weight: 300;
    text-align: center;
}

h2 {
    text-align: center;
}

h3 {
    text-align: left;
}

h4 {
    text-align: left;
}

h5 {
    text-align: left;
}

div {
    display: inline-block;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    width: 90%;
}

pre {
    overflow-x: auto;
    text-align: left;
    border: 1px solid grey;
    border-radius: 3px;
    background: #eeeeee;
    padding: 5px 5px 5px 10px;
    line-height: 1.2;
    white-space: pre-wrap;
}

pre code {
    text-align: left;
    word-wrap: normal;
    white-space: pre-wrap;
    font-size: 14px;
}

a:link, a:visited {
    color: #1367a7;
    text-decoration: none;
}

a:hover {
    color: #208799;
}

.layered-paper-big {
    /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
    box-shadow:
            0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */
            5px 5px 0 0px #fff, /* The second layer */
            5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */
            10px 10px 0 0px #fff, /* The third layer */
            10px 10px 1px 1px rgba(0,0,0,0.35), /* The third layer shadow */
            15px 15px 0 0px #fff, /* The fourth layer */
            15px 15px 1px 1px rgba(0,0,0,0.35), /* The fourth layer shadow */
            20px 20px 0 0px #fff, /* The fifth layer */
            20px 20px 1px 1px rgba(0,0,0,0.35), /* The fifth layer shadow */
            25px 25px 0 0px #fff, /* The fifth layer */
            25px 25px 1px 1px rgba(0,0,0,0.35); /* The fifth layer shadow */
    margin-left: 10px;
    margin-right: 45px;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;  /* replaces padding-top */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* or "contain" */
  display: block;
}

.section-80 { width: 80%; margin: 0 auto; }
.hero-figure img { width: 100%; display: block; }

.tag {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1;
  vertical-align: baseline;
  border: 1px solid rgba(0,0,0,0.08);
}
.tag-green { background: #e9f7ef; color: #1e6b4e; }
.tag-blue  { background: #eaf2ff; color: #1d4ed8; }

.legend-note { color: #555; margin-top: 0.5rem; }
.glyph { font-weight: 700; margin-right: 0.25rem; }

/* Center the table on the page and give it breathing room */
.results-table{
  width: min(900px, 90%);
  margin: 0 auto 1.25rem;
  border-collapse: collapse;
  table-layout: fixed; /* respects colgroup widths */
}

/* Spacing & borders */
.results-table th,
.results-table td{
  padding: 10px 18px;
  border-top: 1px solid #f1f1f1;
}
.results-table thead th{
  border-top: none;
  border-bottom: 1px solid #e6e6e6;
  font-weight: 600;
}

/* Alignment (override Bulma's has-text-centered) */
.results-table th:first-child,
.results-table td:first-child{
  text-align: left !important;
  font-weight: 600;
  white-space: nowrap;
}
.results-table th:not(:first-child),
.results-table td:not(:first-child){
  text-align: center !important;
}

/* Optional: subtle hover */
.results-table tbody tr:hover{ background:#fafafa; }

/* 3-up responsive grid */
.video-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

/* Card & aspect ratio */
.video-card{
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 9 / 9;   /* keeps consistent height */
  display: flex;
  flex-direction: column;
}

/* Make the video fill the card */
.video-card video{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* use 'contain' if you prefer letterboxing */
  display: block;
}

/* Tiny caption */
.video-card figcaption{
  font-size: .9rem;
  text-align: center;
  padding: 6px 0 2px;
  color: #555;
}

/* Stack on smaller screens */
@media (max-width: 1024px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .video-grid{ grid-template-columns: 1fr; }
}