:root {
  --page-bg: #fdfdfd;
  --text-primary: #2c3c4c;
  --heading-primary: #223344;
  --heading-secondary: #334455;
  --header-start: #f5f5f8;
  --header-end: #f1f1f5;
  --avatar-border: rgba(255, 255, 255, 0.9);
  --avatar-shadow: rgba(35, 51, 68, 0.14);
  --divider: #d6dbdf;
  --link: #2471a3;
  --link-hover: #b85f00;
  --emphasis: #a83f3f;
  --media-surface: #ffffff;
  --highlight-surface: #fff8df;
  --venue: #34495e;
  --equal-mark: #7a5000;
  --corresponding-mark: #1f628c;
  --footer-bg: #334455;
  --footer-text: #f7f9fb;
  --muted: #666666;
  --event-text: #555555;
  --news-text: #18212b;
  --soft-line: #e0e0e0;
  --badge-bg: #a83f3f;
  --badge-text: #fdfdfd;
  --scrollbar: rgba(44, 60, 76, 0.38);
}

html[data-theme="dark"] {
  --page-bg: #0d1117;
  --text-primary: #c9d4e0;
  --heading-primary: #edf3f8;
  --heading-secondary: #dce5ee;
  --header-start: #171d26;
  --header-end: #121820;
  --avatar-border: rgba(214, 226, 238, 0.24);
  --avatar-shadow: rgba(0, 0, 0, 0.44);
  --divider: #2c3745;
  --link: #70b7ee;
  --link-hover: #f3b768;
  --emphasis: #ff9494;
  --media-surface: #171d25;
  --highlight-surface: #292418;
  --venue: #aebdd0;
  --equal-mark: #f2c66f;
  --corresponding-mark: #83c8f3;
  --footer-bg: #090c11;
  --footer-text: #e7edf3;
  --muted: #9ba8b6;
  --event-text: #aeb9c6;
  --news-text: #d4dde7;
  --soft-line: #2a3542;
  --badge-bg: #ae4d4d;
  --badge-text: #fff7f7;
  --scrollbar: rgba(190, 205, 220, 0.38);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
html::-webkit-scrollbar {
  background: transparent;
}
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html::-webkit-scrollbar-corner {background: transparent;}
html::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
body {background-color: var(--page-bg); color: var(--text-primary); margin: 0; font-size: 14px;}
h1 {margin-bottom: 32px; font-size: 2.6em;}
h2 {margin-top: 48px; font-size: 1.6em;}
h1, h2 {color: var(--heading-primary);}
h3, h4, h5 {color: var(--heading-secondary);}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h1, h2, h3, h4, h5, a, p, span, body, div {font-weight: normal; font-family: 'Lato', Verdana, Helvetica, sans-serif;}
.header {background: linear-gradient(to bottom, var(--header-start) 10%, var(--header-end) 90%); width: 100%; padding-top: 60px; padding-bottom: 32px;}
.header .content {margin-top: 0;}
.header-profile {display: flex; align-items: center; gap: 24px;}
.header-avatar {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--avatar-border);
  border-radius: 50%;
  box-shadow: 0 4px 14px var(--avatar-shadow);
}
.header-text {display: inline-block;}
.header-name h1 {margin: 0 0 7px; line-height: 1.12;}
.header-subtitle {margin-bottom: 16px; font-size: 1.1em; line-height: 1.35;}
.header-links {line-height: 1.55;}
.content {max-width: 780px; padding-left: 18px; padding-right: 18px; margin: auto; margin-top: 48px;}
.hr {width: 100%; height: 1px; margin: 48px 0; background-color: var(--divider);}
a {color: var(--link); text-decoration: none;}
a:focus, a:hover {color: var(--link-hover);}
p {line-height: 1.5em; font-size: 1.0em; margin-bottom: 1.2em;}
.nobreak {white-space: nowrap;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.cn-text {
  font-family: 'Ma Shan Zheng', cursive;
}
.achievement-highlight {color: var(--emphasis); font-weight: 700;}
.bulletpoints {line-height: 1.5em; font-size: 1.0em;}
.row {box-sizing: border-box;}
.row-media {
  display: block;
  width: 100%;
  height: 110px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background-color: var(--media-surface);
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
}
.row-text {display: block; min-width: 0; line-height: 1.5em; font-size: 1.0em;}
.row-text span {line-height: inherit;}
.clearfix {content: ""; clear: both; display: table;}
.publication {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  margin-bottom: 32px;
}
.publication.highlight {
  width: auto;
  margin-right: -12px;
  margin-left: -12px;
  padding: 12px;
  background-color: var(--highlight-surface);
  border-radius: 4px;
}
.project {grid-template-columns: 176px minmax(0, 1fr); margin-bottom: 32px;}
.project .row-media {height: 110px; padding: 0; background-color: var(--media-surface);}
.publication-title {font-size: 1.08em; line-height: 1.35em; display: inline-block; margin-bottom: 0.35em;}
.publication-title--accent {color: var(--link);}
.publication-authors {color: var(--text-primary);}
.publication-venue {font-style: italic; color: var(--venue);}
.publication-note {color: var(--emphasis); font-weight: 700; white-space: nowrap;}
.award-highlight {color: var(--emphasis);}
.author-key {white-space: nowrap;}
.author-mark {
  display: inline-block;
  margin-left: 0.08em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  text-decoration: none;
  cursor: help;
}
.author-mark--equal {color: var(--equal-mark);}
.author-mark--corresponding {color: var(--corresponding-mark);}
.press {width: 100px; height: 80px; border: 1px solid var(--divider); margin-right: 12px; background-size: cover;}
.img-contain {background-size: contain !important;}
.footer {background-color: var(--footer-bg); width: 100%}
.footer-content {color: var(--footer-text); font-size: 11px; padding: 6px 0; max-width: 748px; margin: auto;}
.footer-content a {color: var(--footer-text); text-decoration: underline;}
.footer-content a:hover {color: var(--link-hover) !important;}
.stars {font-size: 11px; display: inline-block; margin-left: 6px; color: var(--muted);}
.btn {font-size: 1.0em;}
.bulletin-points {line-height: 1.5em; font-size: 1.0em;}

@media only screen and (max-width: 1150px) {
    .header-text {display: block; margin: auto; text-align: center;}
    .header-avatar {flex-basis: 140px; width: 140px; height: 140px;}
    body {font-size: 16px;}
    a.btn {font-size: 14px; padding: 2px 6px;}
    h1 {font-size: 2.4em;}
    h2 {font-size: 1.6em;}
    h3 {font-size: 1.3em;}
    .content {padding-left: 20px; padding-right: 20px;}
}

@media only screen and (max-width: 1000px) {
    .publication {grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-bottom: 40px;}
    .publication .row-media {width: min(100%, 320px); height: min(200px, calc((100vw - 40px) * 0.625)); margin: 0 auto;}
    .publication .row-text {width: 100%;}
    .project .row-media {width: min(100%, 320px); height: min(200px, calc((100vw - 40px) * 0.625));}
    .press {display: block;}
    .datetime {flex-basis: 30%;}
}

@media only screen and (min-width: 601px) and (max-width: 767px) {
    .header {padding-top: 78px; padding-bottom: 30px;}
    .header-profile {flex-direction: column; gap: 14px;}
    .header-avatar {flex-basis: 96px; width: 96px; height: 96px;}
    .header-name h1 {margin-bottom: 3px; font-size: 2em; line-height: 1.15; white-space: nowrap;}
    .header-subtitle {margin: 0 0 9px; line-height: 1.35;}
    .header-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2px 12px;
      font-size: 0;
      line-height: 1;
    }
    .header-links a.btn {padding: 6px 2px; font-size: 14px; line-height: 1.2; white-space: nowrap;}
    .header-links .link-separator {display: none;}
}

@media only screen and (max-width: 600px) {
    body {font-size: 15px;}
    .header {padding-top: 78px; padding-bottom: 28px;}
    h1 {font-size: 2.0em;}
    h2 {margin-top: 40px; margin-bottom: 0.7em; font-size: 1.4em; line-height: 1.25;}
    p {line-height: 1.55;}
    .content {padding-left: 16px; padding-right: 16px;}
    main.content {margin-top: 38px; padding-bottom: 48px !important;}
    .header-profile {flex-direction: column; gap: 14px;}
    .header-avatar {
      flex-basis: 96px;
      width: 96px;
      height: 96px;
    }
    .header-name h1 {
      margin-bottom: 2px;
      font-size: clamp(1.45em, 7vw, 1.75em);
      line-height: 1.15;
      white-space: nowrap;
    }
    .header-subtitle {margin: 0 0 8px; line-height: 1.35;}
    .header-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2px 12px;
      font-size: 0;
      line-height: 1;
    }
    .header-links a.btn {
      padding: 6px 2px;
      font-size: 14px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .header-links .link-separator {display: none;}
    .presentations {padding-left: 0;}
    .presentation {flex-direction: column; min-width: 0; margin-bottom: 12px;}
    .datetime {flex-basis: 100%; padding: 0 0 2px;}
    .details {min-width: 0; padding: 0;}
    .date {font-size: 0.94em;}
    .title, .event, .news {overflow-wrap: anywhere;}
    .news-list {padding-bottom: 2px;}
    .news-list .presentation {margin-bottom: 14px;}
    .publication {row-gap: 10px; margin-bottom: 34px;}
    .publication-title,
    .publication-authors,
    .publication-venue,
    .project .row-text {overflow-wrap: anywhere;}
    .publication-note {white-space: normal; overflow-wrap: anywhere;}
    .publication .btn {display: inline-block; padding: 3px 1px;}
    .footer-content {box-sizing: border-box; padding: 8px 16px;}
}

@media only screen and (max-width: 340px) {
    .header-name h1 {font-size: 1.45em; white-space: normal;}
    .header-avatar {flex-basis: 96px; width: 96px; height: 96px;}
    .header-links {column-gap: 10px;}
}

.experience-list {
    list-style-type: none;
    padding: 0;
}

.experience-list li {
    margin-bottom: 20px;
}

.time {
    display: inline-block;
    width: 150px;
    font-weight: bold;
}

.experience {
    display: inline-block;
}

/*.presentations {*/
/*    list-style-type: none;*/
/*    padding: 0;*/
/*}*/

/*.presentations li {*/
/*    margin-bottom: 20px; !* Adjust the space between entries *!*/
/*}*/

/*.date {*/
/*    display: inline-block;*/
/*    width: 80px; !* Adjust the width for alignment *!*/
/*    font-weight: bold;*/
/*    min-width: 150px; !* Minimum width for the date *!*/
/*    vertical-align: top; !* Align the date to the top of the text *!*/
/*}*/

/*.details {*/
/*    display: inline-block;*/
/*    vertical-align: top; !* Align the details to the top *!*/
/*    max-width: calc(80%); !* Max width allows the text to wrap *!*/
/*}*/

/*.title {*/
/*    font-weight: bold;*/
/*}*/

/*.event {*/
/*    font-size: 0.9em; !* Smaller font size for the event *!*/
/*    color: #555; !* Grey color for the event *!*/
/*}*/

.presentations {
  list-style-type: disc;
  padding-left: 5px;
  margin: 0;
  font-size: 1.0em;
}

.presentation {
  display: flex;
}

.datetime {
  flex-basis: 25%;
  vertical-align: top;
  padding: 5px; /* Adjust padding as needed */
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-size: 1.0em;
}

.date {
  font-weight: bold;
  font-size: 1.0em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.details {
  flex-basis: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-weight: bold;
  font-size: 1.0em;
}

.event {
  font-size: 0.95em; /* Slightly larger font size for the event */
  color: var(--event-text); /* Grey color for the event */
}

.news {
  font-size: 1.0em;
  color: var(--news-text);
}

.news-list {
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 8px;
}

.new-badge {
  display: inline-block;
  background-color: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.7em;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}