html, h1, h2 {
    font-family: "Overpass", "IBM Plex Sans", "Source Sans Pro", "Noto Sans", "Open Sans", Frutiger, "Frutiger Linotype", "Dejavu Sans Condensed", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: proportional-nums oldstyle-nums;
    font-weight: 300;
}

pre, code, samp, tt, .docutils.literal {
    font-family: "Fira Mono", "Ubuntu Mono", monospace;
}

body {
    padding: 0 0.5rem;
    margin: 0.5rem auto;
    line-height: 1.3;
    overflow-x: clip;
}

@media screen and (min-width: 55rem) {
    body {
        max-width: 50rem;
    }
}

header {
    margin: 0 0 2rem 0;
}

a {
    color: black;
}

h1 a {
    text-decoration: none;
}

header h1 {
    border: none;
    margin: 0;
}

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

@media screen and (min-width: 32rem) {
    header h1 {
        font-size: 3rem;
    }
}

@media screen and (min-width: 55rem) {
    header h1 {
        font-size: 4rem;
    }
}

h1, h2 {
    border-bottom: 1px solid black;
    font-size: 1.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
}

h3, h4 {
    margin-bottom: 0.25rem;
}

@media screen and (min-width: 32rem) {
    h1, h2 {
        border: none;
        font-size: 2.25rem;
    }
}

@media screen and (min-width: 55rem) {
    h1, h2 {
        font-size: 3rem;
    }
}

.publications h1, .publications h2 {
    margin-top: 0;
}

@media screen and (min-width: 55rem) {
    main > section {
        margin-left: 3rem;
    }

    main > section h2 {
        margin-left: -3rem;
    }
}

/* .block is used in talk list in CV */

p, ul, ol, details, .project, .block {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

li {
    margin: 0.25em 0;
}

details, .project {
    margin-left: 2rem;
}

details > summary, .project > h4 {
    margin: 0 0 0 -2rem;
    font-size: 1.15em;
    font-weight: unset;
}

details > summary, label[for], input[type="checkbox"] {
    cursor: pointer;
}

.project img.figure {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.project > h4 .badge {
  background: #eee;
  border-radius: 0.25em;
  border: thin solid black;
  display: inline-block;
  font-size: smaller;
  padding: 0 0.25em;
  vertical-align: text-top;
}

.project > input[type="checkbox"] {
    display: none;
}

.project > input[type="checkbox"] + h4 {
    display: list-item;
    list-style: inside disclosure-open;
}

.project > input[type="checkbox"]:not(:checked) + h4 {
    list-style-type: disclosure-closed;
}

.project > input[type="checkbox"]:not(:checked) + h4 ~ * {
    display: none;
}

.project:target > input[type="checkbox"] + h4,
#details-override:checked ~ .sec .project > input[type="checkbox"] + h4 {
    list-style-type: disclosure-open;
}

.project:target > input[type="checkbox"] + h4::marker,
#details-override:checked ~ .sec .project > input[type="checkbox"] + h4::marker {
    color: lightgray;
}

.project:target > input[type="checkbox"] + h4 > label,
#details-override:checked ~ .sec .project > input[type="checkbox"] + h4 > label {
    pointer-events: none;
    cursor: unset;
}

.project:target > input[type="checkbox"] + h4 ~ *,
#details-override:checked ~ .sec .project > input[type="checkbox"] + h4 ~ * {
    display: unset;
}

h4:hover > a.self-link:after {
    content: "¶";
    display: inline-block;
    padding-left: 0.5em;
    opacity: 50%;
}

pre {
    font-size: 0.9em;
    overflow: auto;
    padding: 0.5em;
}

.pre-banner {
    position: relative;
}

.pre-banner:before {
  background: #eee;
  bottom: 0;
  content: "";
  left: -101vw;
  position: absolute;
  top: 0;
  width: 202vw;
  z-index: -1;
}

:lang(fr), :lang(zh-Latn-pinyin), :lang(de) {
    font-style: italic;
}

.degree-institution span[lang], .job-title span[lang] {
    font-style: inherit;
}

:lang(zh-Hans) {
    font-family: DengXian, "Microsoft YaHei", "Hiragino Sans GB", STHeiti, sans-sherif;
}

@media screen and (min-width: 32rem) {
    #id-picture {
        float: right;
        margin-bottom: 1rem;
    }
}

.date {
    font-size: 1.3rem;
}

@media screen and (min-width: 55rem) {
    .date {
        position: absolute;
        font-size: 1.5rem;
        text-align: left;
        left: -11.5rem;
        margin-top: -0.075em;
        white-space: nowrap;
        margin-left: 3rem;
    }
}

.hat {
    font-size: 1.1rem;
    margin: 1rem;
    clear: both;
}


@media screen and (min-width: 32rem) {
    .hat {
        margin: 1rem 1.5rem;
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 55rem) {
    .hat {
        margin: 1rem 3rem;
        font-size: 1.5rem;
    }
}

.history {
    position: relative;
    margin-top: 0.75rem;
}

@media screen and (min-width: 55rem) {
    .history {
        margin: 1rem 0 1rem 8.5rem;
    }
}

.job-details {
    text-align: right;
}

.job-details, .degree-subtext, .paper-details, .talk-list {
    font-size: 1rem;
    margin-top: 0.1rem;
    display: block;
}

.nobreak {
    white-space: pre;
    word-break: keep-all;
}

@media screen and (min-width: 32rem) {
    .newline {
        display: none;
    }
}

.talk-title, .paper-title, .project-name, h3 {
    font-style: inherit;
    font-weight: 600;
}

.paper-title a {
    text-decoration: none;
}

.paper-venue {
    font-weight: 900;
}

.paper-venue, .paper-unpublished {
    white-space: nowrap;
}

.paper {
    position: relative;
}

.paper .badges {
    display: inline-block;
    height: 0;
}

.paper .badge {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin-left: 0.25em;
    vertical-align: -0.25em;
}

.paper-links::before, .paper-sticker::before {
    content: " [";
}

.paper-links::after, .paper-sticker::after {
    content: "] ";
}

.paper-sticker {
    display: none;
}

.paper-abstract {
    font-size: smaller;
    display: block;
}

.paper-abstract:before {
    content: "Abstract — ";
    font-weight: 600;
}

.publications .paper {
    margin: 1.5rem 0;
}

.publications .paper-details {
    margin: 0.35rem 0;
}

@media screen and (min-width: 55rem) {
    .paper-sticker, .paper-annots {
        position: absolute;
        right: 100%;
        margin-right: 0.5rem;
        text-align: right;
    }

    .paper-sticker {
        top: 0;
        display: block;
    }

    .paper-annots {
        font-size: 0.7rem;
        top: 1.3rem;
        width: 6rem;
    }

    .paper-annots .badges {
        display: block;
        height: unset;
        margin: 0.25rem 0;
        vertical-align: unset;
    }

    .paper-annots .badge {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 0.25rem;
    }

    .paper-links::before, .paper-links::after,
    .paper-sticker::before, .paper-sticker::after  {
        display: none;
    }
}

footer {
    margin: 2rem 0;
}

.publications footer {
    font-size: smaller;
}

.publications footer br {
    margin-bottom: 0.5rem;
}

.publications footer .badge {
    margin-left: 0;
}

footer p {
    margin-left: 0;
}

.print-link {
    font-size: 1.2rem;
    font-weight: 600;
}

.fullnums, .talk-meeting, .date, .paper-venue {
    font-variant-numeric: lining-nums;
}

.venue-details, .talk-meeting {
    font-style: italic;
}

.all-papers-link {
    text-align: right;
    display: block;
}

nav {
    font-size: small;
    font-weight: bold; /* For separators */
    margin: 0;
}

nav a {
    font-weight: initial;
    margin: 0 0.5rem;
}

nav a:first-child {
    margin-left: 0;
}

nav a:last-child {
    margin-right: 0;
}

nav a img {
    vertical-align: middle;
    width: 1em;
}

@media screen and (min-width: 32rem) {
    nav a {
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 55rem) {
    nav a {
        font-size: 1.5rem;
    }
}

b, strong, .degree-name, .degree-institution, .job-title, .job-duration, .talk-date {
    font-weight: 600;
}

.degree-header, .job-title {
    font-size: 1.25rem;
}

.talk-list {
    margin: 0;
    padding: 0;
}

.talk {
    list-style-type: none;
    margin: 0.15rem 0;
}

.talk-date::after {
    content: ": ";
    font-weight: normal;
}

@media screen and (min-width: 32rem) {
    .talk {
        margin: 0 0 0 6.5rem    ;
        position: relative;
    }

    .talk-date {
        display: inline-block;
        white-space: nowrap;
        position: absolute;
        text-align: right;
        right: 100%;
        margin-right: 0.5rem;
    }

    .talk-date::after {
        content: unset;
    }
}

.references {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.references div.reference {
    text-align: center;
    margin: 0 1rem;
}

.references .reference-name {
    font-weight: 600;
}

.prospective-students .banner {
    align-items: start;
    display: flex;
    justify-content: center;
    overflow: clip;
    width: 100%;
}

.prospective-students .banner img {
    min-width: 35rem;
    width: 100%;
}

footer.license {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-top: thin solid black;
}

/* Docutils */

.footnote-reference, .footnote dt.label {
  vertical-align: super;
  font-size: small;
  display: inline;
}

.footnote {
    padding-left: 1em;
}

.footnote::before {
    border-top: thin solid black;
    content: "";
    display: block;
    margin-bottom: 0.5em;
    margin-left: -1em;
    width: 35%;
}

.footnote dd, .footnote dd p {
  display: inline;
}

.footnote dd {
  margin-left: 0.25em;
}

main .code .err, main .highlight .err {
    border: none;
    color: inherit;
}

.highlight .w, .code .w {
    color: unset;
    text-decoration: unset;
}