:root {
  --painting-panel: rgba(255, 252, 238, 0.92);
  --painting-panel-border: rgba(255, 214, 103, 0.55);

  --painting-text: #17213a;
  --painting-strong: #0c1730;
  --painting-link: #075ca8;

  --painting-shadow: rgba(2, 18, 55, 0.30);
}


/* =========================================================
   Base
   ========================================================= */

html {
  min-height: 100%;
  background: #071b45;
}

body {
  min-height: 100vh;

  margin: 0;

  background: transparent !important;

  color: var(--painting-text);
}


/* =========================================================
   Van Gogh Canvas Background
   ========================================================= */

#van-gogh-background {
  position: fixed;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* =========================================================
   Main Page Layout
   ========================================================= */

.wrapper {
  position: relative;

  z-index: 1;

  width: 1060px !important;
  max-width: calc(100vw - 50px) !important;

  margin: 0 auto !important;
}


/* Desktop */

@media screen and (min-width: 961px) {

  .wrapper {
    display: grid !important;

    grid-template-columns: 260px 770px;

    column-gap: 30px;

    align-items: start;
  }


  /* Left profile card */

  header {
    position: sticky !important;

    top: 30px !important;

    width: 260px !important;

    float: none !important;

    margin: 30px 0 !important;
  }


  /* Right main content */

  section {
    position: relative !important;

    width: 770px !important;

    float: none !important;

    margin: 30px 0 !important;
  }
}


/* =========================================================
   Glass / Painting Cards
   ========================================================= */

header,
section {
  box-sizing: border-box;

  color: var(--painting-text);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      transparent 42%
    ),
    var(--painting-panel);

  border: 1px solid var(--painting-panel-border);

  box-shadow:
    0 16px 42px var(--painting-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}


/* Left card */

header {
  padding: 28px 20px 28px;

  border-radius: 24px;

  text-align: center;
}


/* Right card */

section {
  padding: 32px 36px 50px;

  border-radius: 28px;
}


/* =========================================================
   Typography
   ========================================================= */

section {
  font-size: 18px !important;

  line-height: 1.65 !important;
}


section p,
section li {
  font-size: 18px !important;

  line-height: 1.65 !important;
}


section h1,
section h2,
section h3 {
  color: var(--painting-strong);
}


section h2 {
  font-size: 28px !important;

  line-height: 1.25 !important;

  margin-top: 32px !important;
  margin-bottom: 17px !important;
}


section h2:first-child {
  margin-top: 4px !important;
}


section h3 {
  font-size: 22px !important;

  line-height: 1.3 !important;
}


body strong,
body autocolor,
body email,
body position {
  color: var(--painting-strong);
}


section strong {
  font-weight: 700;
}


/* =========================================================
   Links
   ========================================================= */

body a {
  color: var(--painting-link);

  text-decoration-thickness: 1px;

  text-underline-offset: 2px;
}


section a {
  font-size: inherit;
}


body p,
body li,
body td,
body th {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36);
}


/* =========================================================
   Research Experience
   ========================================================= */

.research-exp {
  padding-left: 25px !important;

  margin-top: 8px;
}


.research-exp > li {
  margin-bottom: 22px !important;

  padding-left: 2px;

  line-height: 1.65 !important;
}


.research-exp > li:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   Publications
   ========================================================= */

.publications {
  margin-top: 18px;
}


.publications ol.bibliography li .links a.btn {
  color: var(--painting-strong);

  border-color: rgba(12, 23, 48, 0.72);
}


/* Slightly larger paper text */

.publications .title {
  font-size: 17px !important;

  line-height: 1.45 !important;
}


.publications .author {
  font-size: 16px !important;

  line-height: 1.5 !important;
}


.publications .periodical {
  font-size: 16px !important;

  line-height: 1.5 !important;
}


/* =========================================================
   Social Icons
   ========================================================= */

.social-icons a {
  color: #064f91 !important;
}


/* =========================================================
   Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    --painting-panel: rgba(7, 20, 48, 0.92);

    --painting-panel-border:
      rgba(242, 187, 57, 0.46);

    --painting-text: #edf3ff;

    --painting-strong: #fff7d4;

    --painting-link: #6fd3ff;

    --painting-shadow:
      rgba(0, 5, 20, 0.58);
  }


  body,
  body h1,
  body h2,
  body h3,
  body autocolor,
  body email,
  body position {
    color: var(--painting-text);
  }


  body h1,
  body h2,
  body h3,
  body strong {
    color: var(--painting-strong);
  }


  body p,
  body li,
  body td,
  body th {
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.32);
  }


  .publications ol.bibliography li .links a.btn {
    color: #ffffff;

    border-color:
      rgba(255, 255, 255, 0.78);
  }


  .social-icons a {
    color: #70d7ff !important;
  }
}


/* =========================================================
   Tablet / Mobile
   ========================================================= */

@media print, screen and (max-width: 960px) {

  .wrapper {
    display: block !important;

    width: auto !important;

    max-width:
      calc(100vw - 30px) !important;

    margin: 15px auto !important;
  }


  header,
  section {
    position: relative !important;

    float: none !important;

    width: 100% !important;

    top: auto !important;

    border:
      1px solid var(--painting-panel-border);
  }


  header {
    padding: 24px 18px;

    margin:
      0 0 18px !important;
  }


  section {
    padding:
      25px 22px 40px;

    margin:
      0 0 20px !important;
  }


  section {
    font-size: 17px !important;
  }


  section p,
  section li {
    font-size: 17px !important;
  }


  section h2 {
    font-size: 26px !important;
  }
}


/* =========================================================
   Small Phones
   ========================================================= */

@media screen and (max-width: 520px) {

  .wrapper {
    max-width:
      calc(100vw - 18px) !important;

    margin:
      9px auto !important;
  }


  header {
    border-radius: 20px;

    padding:
      22px 16px;
  }


  section {
    border-radius: 20px;

    padding:
      22px 17px 34px;
  }


  section {
    font-size: 16px !important;
  }


  section p,
  section li {
    font-size: 16px !important;
  }


  section h2 {
    font-size: 24px !important;
  }
}


/* =========================================================
   Print
   ========================================================= */

@media print {

  #van-gogh-background {
    display: none;
  }


  header,
  section {
    background: #ffffff;

    box-shadow: none;
  }
}