/* ================================================================
   Custom styles on top of Skeleton.
   Based on Martin Saveski's www_personal template.
   ================================================================ */

:root {
  /* One accent for news dates, timeline dots and foldables. Deliberately the
     same indigo as the "Paper" button below, so the page uses one hue family
     instead of introducing another. Change it here and all three follow. */
  --accent: #4338ca; }

/*  ================ Typography  ================
    skeleton.css hardcodes Raleway on `body` (line 127). my_css.css is loaded
    last, so redeclaring it here wins without editing the vendor file.        */
body,
input,
textarea,
select,
button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif; }

h4 {
  letter-spacing: .1rem; }
.container {
  max-width: 800px; }
.header {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: left; }
.main-description h1 {
  margin-bottom: 0px; }
.main-description p {
  text-align: left;
  margin-bottom: 0px; }
.main-description .fa,
.main-description .ai,
.main-description .fa-brands {
  vertical-align: middle;
  font-size: 22px;
  margin-top: 5px; }

/* Social icons: black instead of Skeleton's link blue (#1EAEDB).
   The colour sits on the <i>, since the <a> is what Skeleton targets. */
.main-description a .fa,
.main-description a .ai,
.main-description a .fa-brands,
.footer a .fa,
.footer a .ai,
.footer a .fa-brands {
  color: #1a1a1a;
  transition: color .15s ease; }
.main-description a:hover .fa,
.main-description a:hover .ai,
.main-description a:hover .fa-brands,
.footer a:hover .fa,
.footer a:hover .ai,
.footer a:hover .fa-brands {
  color: #888; }

/* Profile picture */
.profile-pic {
  border-radius: 50%; }

/*  ================ Publications  ================ */
.paper {
  margin-bottom: 20px }
.paper p {
  margin-bottom: 2px }
.paper .acceptance-rate {
  font-size: 90%;
  color: #777; }
.paper .acceptance-rate::before {
  content: "\00b7";
  margin: 0 0.45em;
  color: #aaa; }
.paper-buttons {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }
.paper .button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  font-weight: 500;
  font-size: 11px;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  border: none;
  border-radius: 50px;
  transition: background-color 0.2s ease, color 0.2s ease; }
.paper .button:hover,
.paper .button:focus {
  border: none;
  outline: 0; }
.paper .button i {
  font-size: 14px; }
.paper .button .icon-hf {
  width: 14px;
  height: 14px;
  vertical-align: middle; }
.paper .btn-paper {
  background-color: #eef2ff;
  color: #4338ca; }
.paper .btn-paper:hover {
  background-color: #dbeafe;
  color: #3730a3; }
.paper .btn-code {
  background-color: #f3f4f6;
  color: #1f2937; }
.paper .btn-code:hover {
  background-color: #e5e7eb;
  color: #111827; }
.paper .btn-data {
  background-color: #fff7ed;
  color: #c2410c; }
.paper .btn-data:hover {
  background-color: #ffedd5;
  color: #9a3412; }
.paper .btn-slides {
  background-color: #ecfdf5;
  color: #065f46; }
.paper .btn-slides:hover {
  background-color: #d1fae5;
  color: #064e3b; }
.paper .btn-poster {
  background-color: #faf5ff;
  color: #7c3aed; }
.paper .btn-poster:hover {
  background-color: #ede9fe;
  color: #6d28d9; }
.paper .btn-video {
  background-color: #fef2f2;
  color: #dc2626; }
.paper .btn-video:hover {
  background-color: #fee2e2;
  color: #b91c1c; }

/*  ================ News  ================ */
.news-date {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.6em; }

/*  ================ Experience timeline  ================
    Left-aligned rail. The <li>'s own border-left IS the rail, so the dot only
    has to be centred on it: left = -((12px dot - 2px rail) / 2 + 1px) = -7px.
    The last item hides its rail so the line stops at the final dot.         */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0; }
.timeline-item {
  position: relative;
  margin: 0 0 0 5px;
  padding: 0 0 26px 26px;
  border-left: 2px solid #e8e8e8; }
.timeline-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-sizing: border-box; }
.timeline-item.is-work::before {
  background: var(--accent); }
.timeline-time {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06rem;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px; }
.timeline-title {
  font-weight: 600;
  color: #222; }
.timeline-place {
  color: #444; }
.timeline-desc {
  color: #777;
  font-size: 1.4rem;
  margin-top: 2px; }

/*  ================ Sections / footer  ================ */
.section-header {
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .2rem;
  font-weight: 600; }
.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin-bottom: 0; }
.footer {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  border-top: 1px solid #eee;
  padding: 15px 0 40px 0;
  margin-bottom: 0; }
.footer .fa,
.footer .ai,
.footer .fa-brands {
  font-size: 18px; }
.navbar {
  display: none; }
.title-subtitle h3 {
  margin-bottom: 0px; }
.title-subtitle h5 {
  color: rgba(0, 0, 0, 0.60); }
.image {
  text-align: center; }

/*  ================ Foldable detail inside the timeline  ================ */
.fold {
  display: block;
  margin-top: 0.6em; }
.fold > summary {
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  user-select: none;
  display: inline-block;
  transition: opacity 0.15s ease; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "\25B8\00a0";
  display: inline-block; }
.fold[open] > summary::before {
  content: "\25BE\00a0"; }
.fold > summary:hover {
  opacity: 0.75; }
.fold-body {
  margin-top: 0.5em;
  padding: 0.6em 0.85em;
  background: #fafafa;
  border-left: 2px solid var(--accent);
  color: #444;
  line-height: 1.55em; }

/*  ================ Project styling  ================ */
.project-container {
  margin-bottom: 30px; }
.project-image-container {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 3px;
  transition: 0.3s; }
.project-image-container:hover {
  transition: 0.3s; }
.project-image-container:hover img {
  opacity: 0.4; }
.project-caption {
  padding: 3px; }

/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 5rem; }
}

/* Larger than tablet */
@media (min-width: 750px) {
  /* Navbar */
  .navbar + .docs-section {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: 6.5rem;
    background: #fff;
    z-index: 99;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }
  .navbar-spacer {
    display: none; }
  .navbar > .container {
    width: 100%; }
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222; }
  .navbar-link.active {
    color: #33C3F0; }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 80%; }
}