/* Always reserve room for the vertical scrollbar so the centered column keeps
   the same width and position on every page, whether or not it is long enough
   to scroll. Without this, the long landing page (which scrolls) loses the
   scrollbar's width while the shorter pages (which don't) keep it, so the
   content looks wider on the shorter pages. */
html {
  scrollbar-gutter: stable;
}

/* The whole page is one centered column. max-width (not width) means narrow
   viewports simply get the full screen, and the navbar collapses to its
   hamburger at the usual Bootstrap md breakpoint regardless. */
.page {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

main {
  margin-top: 1rem;
  margin-bottom: 5rem;
}
footer {
  border-top: solid 2px #2D2926;
  background: #FFFFFF;
  color: #2D2926;
  font-weight: 550;
}

.announcement {
  font-size: 1rem;
  font-weight: bold;
}

.start {
  margin-bottom: 2rem;
}

/* Below this, .welcome has too little width left beside the fixed-height
   photo -- text wraps word-by-word and eventually overflows the viewport
   instead of dropping below the photo. Stack them instead. */
@media (max-width: 650px) {
  .start {
    flex-direction: column;
  }
  .logo,
  .welcome {
    width: 100%;
  }
}

.logo {
  flex: 0 0 auto;
  /* Bootstrap's base .row > * rule sets width: 100% on every direct child
     regardless of column class; since flex-basis is auto here, that width
     -- not the image's content size -- would otherwise become the item's
     main size. */
  width: auto;
}

.welcome {
  /* flex-basis: 0 (not auto) -- with auto, the flex algorithm's wrap
     decision is based on this item's max-content width, i.e. the
     .interests sentence laid out on one unbroken line (700px+), which
     overflows the row and wraps .welcome onto its own line before grow/
     shrink ever get applied. Basis 0 sizes purely from available space. */
  flex: 1 1 0%;
  width: auto;
  /* Flex items default to min-width: auto (their content's max-content
     width), which can force the row to overflow instead of shrinking. */
  min-width: 0;
}
.title {
  color: #CC0000;
  font-weight: 450;
  font-size: 2.5rem;
  margin-bottom: 0.25rem;
}
.subtitle {
  max-width: 730px;
}
.subtitle b {
  color: #CC0000;
  font-weight: 600;
}

.header {
  color: #2D2926;
  font-weight: 650;
}

/* 271px is a deliberate size choice, not a match to the text column's
   height (that was ~212px) -- picked because it looks better than an exact
   match. Width follows automatically to keep the photo's aspect ratio. */
#profile-img {
  display: block;
  height: 271px;
  width: auto;
}

/* Stacked layout: no sibling to match height against, so back to a plain
   fixed square. */
@media (max-width: 650px) {
  #profile-img {
    height: 271px;
    width: auto;
    object-fit: cover;
    object-position: center;
    margin-bottom: 1rem;
  }
}

.role {
  font-size: 1.4rem;
  margin-bottom: 0;
}

.contact {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.interests {
  margin-top: 0;
}


#copyright {
  margin-left: 0.5rem;
  float: left;
  padding: 10px;
}
#lastupdated {
  margin-right: 0.5rem;
  float: right;
  padding: 10px;
  font-size: 0.8em;
  vertical-align: bottom;
}
.clear {
  clear: both;
  font-size: 0pt;
}

.title-badges {
  font-size: 1.2em;
  margin-top: -0.7rem;
  margin-bottom: 1.5rem;
}


.card-badges {
  font-size: 1.1em;
  margin-bottom: 5px;
}
.card.project {
  min-width: 375px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: solid 3px #2D2926 !important;
  border-radius: 25px !important;
}

.card.project img {
  border-top-left-radius: 25px !important;
  border-top-right-radius: 25px !important;
}
.card.project .card-body {
  padding-left: 20px;
  padding-right: 20px;
}
.card.project .card-title {
  min-height: 2.4em;
  font-size: 1.2em;
}
.card.project .card-text {
  display: block;
  min-height: 3em;
  font-size: 1em;
}
.card.project .card-link {
  text-align: center;
  display: block;
  margin-bottom: 5px;
}
#rust-img {
  padding: 25px;
  width: 66% !important;
  margin-left: auto;
  margin-right: auto;
}


.people-card {
  padding: 0;
  width: 200px;
}
.people-card .card-img-top {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.card-body {
  padding: 0;
}


.people-card .card-body {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.people-card .card-title {
  position: relative;
  float: left;
  width: 100%;
  z-index: 2;
}

.people-card .card-text {
  float: right;
  position: absolute;
  width: 100%;
  text-align: right;
  font-size: 0.75rem;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}




.project-title {
  font-size: 1.15em;
}
.project-title .project-title-badges {
  float: right;
  font-size: 0.8em;
}
.project-people {
  clear: both;
}
.project-keywords {
  font-size: 0.8em;
}
.project-collaborators {
  margin-top: 0.3em;
  margin-bottom: -0.5em;
  font-size: 0.8em;
}
.project-people-name {
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.3s ease-in-out;
}
.project-people-name:before {
  content: '\00a0';
}
.project-people-name:after {
  content: '\00a0\00a0\00a0\00a0\00a0';
}
.project-description {
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}


.project-people-icon {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  vertical-align: middle;
  display: inline-block;
}
.project-section {
  margin-top: 6rem;
  margin-bottom: 1rem;
}

.container.publications {
  margin-left: 2rem;
  margin-right: 2rem;
}

/* Space out the entries in the "Select Publications" list on the landing page. */
ul.publications li {
  margin-bottom: 0.5rem;
}
/* Teaching / Service pages: a little breathing room between list entries. */
.course-list li,
.service-list li {
  margin-bottom: 0.5rem;
}

/* Section headings on the publications page (years, dissertation, software):
   a little smaller than a default h4, with extra space above to separate the
   groups. */
.pub-section {
  font-size: 1.2rem;
  margin-top: 2.75rem;
  margin-bottom: 0.5rem;
}

.publication-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.publication-list li {
  margin-top: 0.8em;
  margin-bottom: 1.2em;
}
.publication-title {
  font-weight: bold;
  font-size: 1.2em;
}
.publication-author,.publication-venue {
  font-size: 1em;
  color: #2D2926;
}
.publication-venue {
  font-style: italic;
}

.publication-venue:after {
  clear: both;
}

.publication-title .file-icon {
    float: right;
    font-size: 1.2em;
    color: #2D2926;
}