:root {
  --bg: #fbfdff;
  --headerbg: transparent;
  --navbg: transparent;
  --mainbg: transparent;
  --footerbg: transparent;
  --navlink: #56473d;
  --navborder: #56473d;
  --width: 1020px;
}

/*** GENERAL ***/

* {
  box-sizing: border-box;
}

body, div, header, footer, main, h1, h2, h3, h4, h5, h6, img, p {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
}

body {
  background: var(--bg);
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12pt;
  line-height: 1.6;
  padding: 1.5rem;
  word-wrap: break-word;
}

a {
  color: #3a6eb1;
  text-decoration: none;
}

a:active, a:hover {
  color: #71acf8;
  outline: 0;
}

ul {
  padding-left: 20px;
}

/*** HEADER ***/

header {
  max-width: var(--width);
  width: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
  background: var(--headerbg);
  /* background: rgb(61,154,194); */
  /* background: linear-gradient(0deg, rgba(61,154,194,0.05) 0%, rgba(255,255,255,0) 100%); */
  gap: 5px;
  border-image: linear-gradient(0deg, rgba(61,154,194,0.05) 0%, rgba(255,255,255,0) 100%) fill 0/0/0 100vw;
}

header img {
  max-width: 200px;
}

header h1 {
  font-size: xx-large;
  text-align: center;
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #567c95 0%, #6165a9 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

header h2 {
  font-size: medium;
  text-align: center;
  background-image: radial-gradient( circle 986.6px at 10% 20%,  rgba(251,6,6,0.94) 0%, rgba(3,31,213,1) 82.8%, rgba(248,101,248,1) 87.9% );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

header p {
  margin: 0;
  text-align: center;
}

header div.icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

header div.icons a {
  font-size: x-large;
  color: #686868;
}

header div.icons a[title] {
  position: relative;
}

header div.icons a:hover[title]::after {
  content: attr(title);
  display: inline-block;
  padding: 0.2em 0.6em;
  white-space: nowrap;
  background-color: #555;
  color: #fff;
  font-style: normal;
  font-family: sans-serif;
  font-size: 0.8em;
  position: absolute;
  top: 170%;
  left: 50%;
  transform: translate(-50%, -1em);
  z-index: 1;
}

div.icons a:has(i.ai-orcid):hover {
  color: #A6CE39;
}

div.icons a:has(i.fa-bluesky):hover {
  color: rgb(0, 133, 255);
}

div.icons a:has(i.fa-mastodon):hover {
  color: rgb(99 100 255);
}

div.icons a:has(i.fa-github):hover {
  color: #1f2329;
}

div.icons a:has(i.ai-google-scholar):hover {
  color: #3769c3;
}

/*** NAV ***/

nav {
  max-width: var(--width);
  width: auto;
  margin: auto;
  padding: 15px;
  padding-top: 0;
  background: var(--navbg);
  /* background: linear-gradient(0deg, rgba(61,154,194,0.1) 0%, rgba(61,154,194,0.05) 100%); */
  /* border-bottom: 1px solid var(--navborder); */
  padding-bottom: 30px;
  border-image: linear-gradient(0deg, rgba(61,154,194,0.1) 0%, rgba(61,154,194,0.05) 100%) fill 0/0/0 100vw;
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 15px;
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  font-size: large;
  color: var(--navlink);
  border-bottom: 3px dotted var(--navlink);
  padding-bottom: 0.2em;
  margin: 0.3em;
}

nav ul li a:hover {
  color: var(--navlink);
  border-bottom: 3px solid var(--navlink);
}

/*** MAIN ***/

main {
  width: auto;
  margin: auto;
  max-width: var(--width);
  background: var(--mainbg);
  /* padding: 15px; */
  padding-top: 30px;
  display: flex;
  flex-direction: column;
}

main p {
  margin-bottom: 6px;
}

main h1, main h2 {
  margin: 15px 0;
}

main h3, main h4, main h5, main h6 {
  margin-bottom: 6px;
}

main h1 {
  font-size: 1.7em;
}

main p:has(+ section) {
  margin-bottom: 30px;
}

/*** SECTIONS ***/

main > section {
  border-image: conic-gradient(rgba(249, 247, 247, 0.5) 0 0) fill 0/0/0 100vw;
}

main > section.level1:nth-child(even) {
  border-image: conic-gradient(rgba(241, 238, 238, 0.5) 0 0) fill 0/0/0 100vw;
}

section#publications {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 15px;
}

section#publications > h1 {
  flex: 4 var(--width);
}

section#publications h2 {
  color: rgb(73, 73, 73);
  text-align: center;
  font-size: large;
}

section#phd-thesis > h3 {
  color: rgb(73, 73, 73);
  text-align: center;
  font-size: large;
}

section#publications > section {
  flex: 1 400px;
}

section#publications > section:first-of-type {
  flex: 10 400px;
}

div.article {
  width: 100%;
  /* margin: 0 5px; */
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 5px;
  background-color: #ebf0ee;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

div.article p:has(img) {
  text-align: center;
}

div.article p:has(img) {
  flex: 1 200px;
}

div.article img {
  max-width: 90%;
}

div.article p {
  flex: 10 400px;
}

section.student {
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  background-color: #ebf4f9;
  flex: 1 400px;
}

section.student p {
  margin: 0;
}

section:has(> section.student) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

section:has(> section.student):last-of-type {
  margin-bottom: 15px;
}

section:has(> section.student) > h2 {
  flex: 4 var(--width);
}

/*** FOOTER ***/

footer {
  width: auto;
  margin: auto;
  max-width: var(--width);
  /* background: var(--footerbg); */
  /* padding: 15px; */
  padding: 1.5rem 0;
  /* border-top: 1px solid var(--navborder); */
  text-align: center;
  color: rgb(42, 68, 66);
  border-image: conic-gradient(rgba(61,154,194,0.2) 0 0) fill 0/0/0 100vw;
  margin-bottom: -1.5rem;
}

/* KBD (keyboard) */

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* Code */

code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 10pt;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
}

code::before, code::after,
tt::before, tt::after {
  letter-spacing: -0.2em;
	content: "\00a0";
}

/* ALERTS */

div.tip {
  border-left: 4px solid rgb(48, 148, 48);
  padding-left: 10px;
}

div.tip > div.title p {
  color: rgb(48, 148, 48);
  font-weight: bold;
}

div.tip > div.title p::before {
  font-family: "Font Awesome 6 Free";
  content: '\f0eb';
  margin-right: 4px;
}

div.important {
  border-left: 4px solid rgb(115, 32, 136);
  padding-left: 10px;
}

div.important > div.title p {
  color: rgb(115, 32, 136);
  font-weight: bold;
}

div.important > div.title p::before {
  font-family: "Font Awesome 6 Free";
  content: '\f27a';
  margin-right: 4px;
}

div.warning {
  border-left: 4px solid rgb(233, 170, 46);
  padding-left: 10px;
}

div.warning > div.title p {
  color: rgb(233, 170, 46);
  font-weight: bold;
}

div.warning > div.title p::before {
  font-family: "Font Awesome 6 Free";
  content: '\f071';
  margin-right: 4px;
}

div.caution {
  border-left: 4px solid rgb(233, 46, 83);
  padding-left: 10px;
}

div.caution > div.title p {
  color: rgb(233, 46, 83);
  font-weight: bold;
}

div.caution > div.title p::before {
  font-family: "Font Awesome 6 Free";
  content: '\f06a';
  margin-right: 4px;
}

div.note {
  border-left: 4px solid rgb(46, 93, 233);
  padding-left: 10px;
}

div.note > div.title p {
  color: rgb(46, 93, 233);
  font-weight: bold;
}

div.note > div.title p::before {
  font-family: "Font Awesome 6 Free";
  content: '\f05a';
  margin-right: 4px;
}

/* CLASSES */

.round-image {
    border-radius: 50%;
    object-fit: cover;
}

section.paper {
  background-color: rgb(251, 248, 248);
  padding: 10px;
  border: 1px solid rgb(206, 206, 206);
  border-radius: 5px;
  margin-bottom: 4px;
  margin-top: 0.2em;
  box-shadow: 0 3px 2px rgba(52, 52, 52, 0.08);
  width: 100%;
  margin-bottom: 15px;
}

section.paper:hover {
  box-shadow: 0 4px 3px rgba(32, 32, 32, 0.08);
  border-color: rgb(166, 166, 166);
  background-color: #fff;
}

section.paper h3 {
  margin: 0;
  font-size: medium;
}

section.paper .authors {
  font-size: small;
}

section.paper p {
  color: rgb(136, 136, 136);
  margin: 0;
  font-size: small;
}

section.paper p:has(+ div.files) {
  margin-bottom: 5px;
}

div.files {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 0;
}

div.files a {
  border-radius: 5px;
  padding: 4px;
  margin-right: 5px;
  background: #e5e7e8;
  color: #343d44;
  font-size: small;
}

div.files a:hover {
  background: #c1e2fb;
  text-decoration: none;
}

#news ul {
  --icon-size: .8em;
  --gutter: .5em;
  padding: 0 0 0 var(--icon-size);
}

#news ul li {
  padding-left: var(--gutter);
}

#news ul li::marker {
  font-family: "Font Awesome 6 Free";
  content: '\f133';
  font-size: var(--icon-size);
  color: brown;
}

span.draft {
  border-radius: 0.1em;
  background: #8d72be;
  padding: 0.03em 0.3em;
  color: rgb(255, 251, 251);
}

span.distinguished {
  border-radius: 0.1em;
  background: #00b34a;
  padding: 0.03em 0.3em;
  color: rgb(255, 251, 251);
}

span.invited {
  border-radius: 0.1em;
  background: #b028ae;
  padding: 0.03em 0.3em;
  color: rgb(255, 251, 251);
}

span.lastupdate {
  color: #9e9d9d;
}

i.fa-award {
  color: #00b34a;
}

span.speaker {
  text-decoration: underline;
}

@media screen and (min-width: 1000px) {
  header.split {
    flex-direction: row;
    gap: 2em;
  }

  header.split h1, header.split h2, header.split p {
    text-align: left;
  }

  header div.icons {
    justify-content: left;
  }

  div.article {
    text-align: left;
  }
}