* {
	margin: 0;
	padding: 0;
}

.gradient-background {
  background: linear-gradient(300deg, #00bfff, #f1eff0, #1673ff);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

.gradient-background2 {
  background: linear-gradient(300deg, #00bfff31, #f1eff0, #1683ff38);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
  background-color: #ffffffce;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


html {
  scroll-behavior: smooth;
  /* scroll-padding-top: max(3.5rem, 6vh); */
  scroll-padding-top: 7em;
}


/* offset scroll target to compensate for the page header */
:target:before {
  content: "";
  display: block;
}


body {
  font-family: "Ubuntu";
	line-height: 1.7;
	letter-spacing: 0.03em;
}

/* Used in conjunction with js to stop all transitions when the window is being resized. This prevents an artifact where
   the navbar appears open and then transitions to the closed state (when the media query boundary is crossed). */
body.stop-transitions * {
  transition: none !important;
}



.custom-shape-divider-bottom-1714841758 svg {
  position: relative;
  display: block;
  width: 100%;
  height: 44px;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1714841758 .shape-fill {
  fill: #FFFFFF;
}


.clear {
	clear: both;
	height: clamp(2em, 5vmax, 3em);
}

#page-wrap {
	max-width: 1100px;
  margin: 0px auto;
	padding: 1em;
}

.text-focus-in{
  animation:text-focus-in 3s cubic-bezier(.55,.085,.68,.53) both
}

.text-focus-in2{
  animation:text-focus-in 4s cubic-bezier(.55,.085,.68,.53) both
}
@keyframes text-focus-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}}
@keyframes text-focus-in2{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}}


h2 {
	font-weight: bold;
	font-size: 1.3em;
  padding-bottom: 0.7em;
}

.publication_figure {
  width: min(250px, 100%)
}

.publication_figure > img {
	max-width: min(100%, 250px);
}

.publication_text > img {
    max-width: min(100%, 250px);
}

/* used to set a fixed width font */
.fixed {
	font-family: "Courier", monospace;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2.5em;
  align-items: center;
}

/* To center the image within its div */
.grid-container > .publication_figure {
  display: grid;
  align-items: center;
}

.img_contact{
  max-width: 35%;
  height: auto;
 }
 






/* Switch to a single column (paper description below image) if the screen is small.
   Make the gap between an image and its text smaller than the gap between two different publications.*/
@media only screen and (max-width: 550px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-gap: 1em;
  }

  .custom-shape-divider-bottom-1714841758 svg {
    position: relative;
    display: block; 
    width: 100%;
    height: 44px;
    transform: rotate(180deg);
  }
 
  .img_contact{
   max-width: 80%;
   height: auto;
  }


  .grid-container > .publication_text {
    margin-bottom: 2em;
  }
}

/* Make table more readable by adding alternate colors, with special handling for the multi-rows */
tr:nth-child(2n+9),tr:nth-child(6),tr:nth-child(7) {
  background-color: #f5f5f5;
}

td {
  padding-right: 2em;
}

span.newstuff {
	color: #d100d1;
}

span.paper {
  color: #c75300;
}

em {
  color: #aa1d1d;
}

#email {
  float: right;
}

/* footer with social icons */

footer {
  background-color: #eaeaea;
  text-align: center;
  width: 100%;
}

footer i {
  margin: 20px 5px;
  transform: scale(1.0);
  transition-duration: 0.2s;
}

footer i:hover {
  margin: 20px 5px;
  transform: scale(1.2);
  transition-duration: 0.2s;
}

footer a {
  color: #757575;
  text-decoration: none;
  border-bottom: none;
}

footer a:hover {
  color: #757575;
  border-bottom: none;
}

/* Set different hover colors per icon */
footer i[class*="ai-google-scholar"]:hover {
  color: #4b87ea;
}
footer i[class*="ai-semantic-scholar"]:hover {
  color: #e0bf48;
}
footer i[class*="fa-youtube"]:hover {
  color: #e30707;
}
footer i[class*="fa-x-twitter"]:hover {
  color: black;
}
footer i[class*="fa-linkedin"]:hover {
  color: #0a66c2;
}
footer i[class*="fa-envelope"]:hover {
  color: black;
}

/* bib tooltips */

.bib {
  color: #757575;
  text-decoration: none;
  border-bottom: 1px dotted #757575;
}

.bib_tooltip {
  line-height: 1.2;
  font-size: 0.8em;
  min-width: min(600px, 100%);
}