body {
  /*font-family: 'Arial', sans-serif;*/
  background-color: #fff;
  font-size: 15px;
  color: #495365;
  transition: background-color 0s, color 0s;
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
  background-color: #fff;
  color: black;
  padding: 15px;
  font-size: 15px;
  margin-top: 10px;
  border: 0.5px solid #ccc;
}
#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm textarea:focus {
  border: 4px solid #87CEEB;
  outline: none;
}
body.dark-mode #contactForm input[type="text"],
body.dark-mode #contactForm input[type="email"],
body.dark-mode #contactForm textarea {
  background-color: #555;
  color: #fff;
}
.navbar {
  background-color: #dee2e6;
  color: black;
  transition: background-color 0s, color 0s;
  border-bottom: 1px solid  #ccc;
}
.navbar .navbar-brand, .navbar .nav-link, .navbar a {
  font-size: 18px;
  color: inherit;
  transition: color 0s;
}
.navbar .navbar-brand {
  font-size: 17px;
  color: black;
}
body.dark-mode, .navbar.dark-mode {
  background-color: #343a40;
  color: #fff;
}
.navbar.dark-mode .navbar-brand,
.navbar.dark-mode .nav-link,
.navbar.dark-mode a {
  color: #fff;
}

.navbar .nav-link[aria-expanded="true"], .navbar .dropdown-menu a {
  color: black;
  background-color: #87CEEB;
}
.navbar.dark-mode .nav-link[aria-expanded="true"], .navbar.dark-mode .dropdown-menu a {
  color: #fff;
  background-color: #343a40;
}
  .navbar .dropdown-menu a {
    color: black;
    background-color: #fff;
  }
  .navbar .dropdown-menu a:hover {
    background-color: #fff;
    color: #87CEEB;
  }
  .back-to-top {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background-color: #fff;
  color: #343a40;
  border: 1px solid #343a40;
  border-radius: 10px;
  padding: 8px 8px;
  cursor: pointer;
  font-size: 14px;
  z-index: 1000;
}
.back-to-top:hover {
  background-color: #87CEEB;
}
body.dark-mode .back-to-top {
  background-color: #343a40;
  color: #fff;
  border: 0.5px solid #fff;
}
body.dark-mode .back-to-top:hover {
  background-color: #87CEEB;
}

.navbar.dark-mode .nav-link.active {
background-color: transparent; /* Dark mode active link background */
}
.circle-img {
  border-radius: 50%;
  width: 270px;
  height: 260px;
  object-fit: cover;
}
details {
  position: relative;
}
details > summary {
  color: #333333;
  font-size: 24px;
  list-style: none;
  cursor: pointer;
  outline: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary:before {
  content: "+";
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #87CEEB;
  border: 1px solid #ccc;
  margin-right: 10px;
  font-size: 16px;
}
details[open] > summary:before {
  content: "−";
}
.dark-mode details > summary {
  color: #fff !important;
}
.navbar .nav-link:hover, .navbar a:hover {
  color: #87CEEB;
  /*background-color: #87CEEB;*/
}
.navbar.dark-mode .nav-link:hover, .navbar.dark-mode a:hover {
  color: #87CEEB;
}
#theme-toggle {
  font-size: 20px;
}

pre.light-mode {
  background-color: white;
  color: #000000;
}

code.light-mode {
  background-color: white;
  color: #000000;
}

pre.dark-mode, code.dark-mode {
  background-color: black;
  color: #ffffff;
}

.code-wrapper {
  position: relative;
  margin-bottom: 1.5em;
}
.code-wrapper pre {
  color: #000000;
}
body.dark-mode .code-wrapper pre {
  color: #ffffff;
}

.copy-icon, .mode-icon {
  position: absolute;
  top: 10px;
  cursor: pointer;
  font-size: 1.2em;
}

.copy-icon {
  right: 10px;
  color: #555; /* Light color for copy icon */
}

.mode-icon {
  right: 40px; /* Position it to the left of the copy icon */
}

body.dark-mode .copy-icon {
  color: white; /* Dark color for copy icon in dark mode */
}

pre.dark-mode + .copy-icon {
  color: white; /* Light color for copy icon when code chunk is in dark mode */
}

.copy-tooltip {
  position: absolute;
  top: -25px;
  right: 10px;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Style for references in dark mode */
body.dark-mode .references {
  background-color: transparent; /* Dark background for references */
}

body.dark-mode .references a {
  color: #87CEEB; /* Link color in references for dark mode */
}

/* Additional styles for any specific reference tags, if used */
body.dark-mode .references .cite {
  background-color: #444; /* Optional: specific background for citations */
  color: #fff;
}

body.dark-mode .references hr {
  border-color: #555; /* Divider color in dark mode */
}

/* Ensure pre and code elements within references also adhere to dark mode */
body.dark-mode .references pre,
body.dark-mode .references code {
  background-color: #000;
  color: #ffffff;
}

/* General targeting for the references section header in dark mode */
body.dark-mode h2, /* Or h3, h4, depending on your header level */
body.dark-mode h2.references-header,
body.dark-mode .references h2 {
  background-color: #343a40 !important; /* Important to override any inline styles */
  color: #fff !important; /* Force white text color */
  padding: 10px; /* Optional padding for better appearance */
  border-bottom: 1px solid #555; /* Optional bottom border for separation */
}


body.dark-mode .references {
  background-color: #343a40 !important;
  color: #fff !important;
}

body.dark-mode .references h2 {
  background-color: #343a40 !important;
  color: #fff !important;
  padding: 10px;
  border-bottom: 1px solid #555;
}


/* STARTED ADDING NEW HERE */




body.dark-mode a {
    color: #fff !important; /* Ensure links are also white */
}


body.dark-mode a:hover {
    color: #0096c7 !important; /* Specify hover color for all links in dark mode */
}

body a:hover {
    color: #0096c7 !important; /* Specify hover color for all links in dark mode */
}

.navbar a:hover{
  color:#0096c7 !Important;
}






/*.dark-mode .about-entity,
.dark-mode .about-link,
.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5; /* Adjust line height as needed */
}









div.quarto-about-trestles .about-entity .about-links {
    row-gap: 1em;
    width: 100%;
    padding-bottom: 1.5em;
    flex-direction: row !important;
}

div.quarto-about-trestles .about-entity .about-links {
    display: flex;
}

.about-entity .about-link {
    padding: 0.25em 0.25em !important;
    border: none !important;
}

.about-entity .about-links {
    justify-content: center !important;
    column-gap: 0em !important;
    font-size: 1.2em !important;
}

  /* about area */
  .about-entity {
    margin: 0em 0em 0em 0em;
  }
 


.navbar-brand {
    color: #fff;
    font-family: "Balsamiq Sans"!important;
    font-size: 1.0em;
}

.navbar-custom .navbar-nav > .active > a {
        color: #e2eafc !important;
        background-color:transparent !important;
    }



a.kofi-button {
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    line-height: 36px !important;
    min-width: 150px;
    margin-top: 25px;
    display: inline-block !important;
    padding: 1px 12px !important;
    text-align: center !important;
    border-radius: 1110px !important;
    color: #fff;
    cursor: pointer;
    overflow-wrap: break-word;
    vertical-align: middle;
    border: 0 none #fff !important;
    font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important;
    text-decoration: none;
    text-shadow: none;
    font-weight: 700 !important;
    font-size: 12px !important;
}

#share-container span {
    display: block;
    margin: .5rem auto;
    font-size: 16px;
    padding: 1px 12px;
    line-height: 13px !important;
}


element.style {
    padding-top: 130px !important;
}

@media (max-width: 991.98px) {
    #quarto-content>* {
        padding-top: 35px !important;
    }
}

#title-block-header.quarto-title-block.default .quarto-title .title {
    font-size: 2.0em;
    margin: 0 0 -0.5em 0;
}


.card {
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 4px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
}



// Slide iframes

.slides {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-style: none;
  border-width: 1px;
}


.btn {
    color: #595959 !important;
    background-color: #ffffff !important;
    border-color: #7d8383 !important;
    font-weight: 200 !important;
    border-radius: 8px !important;
    border-width: 1px 1px !important;
    text-transform: lowercase !important;
    line-height: 0.5 !important;
}

.listing-btn-group {
  display: inline-block;
  gap: 1em;
  justify-content: center !important;
}


.about-entity .about-link i {
    font-size: 1.5em; /* Adjust size as desired */
}
.about-entity .about-link {
    margin-top: -1em !important;
    padding: 0.25em 0.25em !important;
    border: none !important;
}

.dark-mode .about-entity,
.dark-mode .about-link {
    margin-top: -1em !important;
    padding: 0.25em 0.25em !important;
    border: none !important;
}

#quarto-content .subtitle {
  margin-top: -0.7em !important;
    padding-top: 10px;
    font-size: 1.0em;
}




/* Remove transition if layout shifts are affected by color changes */
body, .navbar {
  background-color: #fff;
  color: #495365;
}


body.dark-mode, .navbar.dark-mode {
  background-color: #343a40;
  color: #fff;
}

/* Consistent spacing for .about-entity and .about-link */
.about-entity, .about-link {
  margin-top: -1em !important; /* Consistent in both modes */
  padding: 0.25em 0.25em !important;
  border: none !important;
}

.about-entity .about-links {
  row-gap: 1em;
  column-gap: 0em;
  width: 100%;
  padding-bottom: 1.5em;
  display: flex;
  flex-direction: row !important;
  justify-content: center !important;
  font-size: 1.2em !important;
}

/* Consistent responsive padding */
@media (max-width: 991.98px) {
    #quarto-content>* {
        padding-top: 35px !important;
    }
}

/* Ensuring hero-heading maintains padding in both modes */
#hero-heading, body.dark-mode #hero-heading {
  padding-top: 1.5em !important;
  margin-bottom: 1em !important;
}

#hero-heading img, body.dark-mode #hero-heading img {
  width: 14em !important;
  height: auto !important;
  border-radius: 50% !important;
  margin-top: 0 !important;
  display: block !important;
}














/* Ensuring consistent spacing and padding for #hero-heading text */

#hero-heading {
  /*padding-top: 1.5em !important;*/
  margin-bottom: 1em !important;
  line-height: 1.4 !important; /* Ensure consistent line height */
}


#hero-heading h2, #hero-heading h3, #hero-heading p,
body.dark-mode #hero-heading h2,
body.dark-mode #hero-heading h3,
body.dark-mode #hero-heading p {
  /*margin: 0 !important; /* Remove margin inconsistencies */
  padding: 0 !important; /* good to avoid shift*/
  line-height: 1.4 !important; /* Consistent line height for all headings */
  /*font-size: 1em !important; /* Ensures consistent font size */
}






#hero-heading {
  padding-top: 0em !important; /* Reduced padding */
  margin-bottom: 1em !important;
  line-height: 1.5 !important;
}
/* Consistent spacing for #hero-heading in both light and dark modes */
#hero-heading,
body.dark-mode #hero-heading {
  padding-top: 0.5em !important; /* Reduced padding for both modes */
  margin-bottom: 1em !important;
  line-height: 1.5 !important;
}


#hero-heading,
body.dark-mode #hero-heading {
  padding-top: 0.5em !important; /* Adjusted padding */
  margin-top: -2em !important; /* Negative margin to pull it up */
  margin-bottom: 1em !important;
  line-height: 1.5 !important;
}


.navbar .nav-link.active,
.navbar.dark-mode .nav-link.active {
  background-color: transparent; /* Active link background for both light and dark mode */
}




.about-entity .about-links .about-link i {
    border: 2px solid #dee2e6 !important; /* Light gray border color */
    border-radius: 50% !important; /* Circular border */
    padding: 0.3em !important; /* Spacing around the icon */
    transition: border-color 0.3s ease !important; /* Smooth transition for hover effect */
    display: inline-flex;
}

.about-entity .about-links .about-link i:hover {
    transform: scale(1.3); /* Scales up icon on hover */
    border-color: #0096c7 !important; /* Changes border color on hover */
}













/* General transition settings for body */
body {
  background-color: #fff;
  color: #495365;
  transition: background-color 0.3s ease, color 0.3s ease;
}



.fa-orcid:before {
    content: url('https://orcid.org/sites/default/files/images/orcid_24x24.png');
    vertical-align: middle;
}


/* Navbar transition */
.navbar, .navbar .navbar-brand, .navbar .nav-link, .navbar a {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transition for the back-to-top button */
.back-to-top {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* Smooth transition for links */
a, .navbar .nav-link, .navbar a {
  transition: color 0.3s ease;
}


/* Code blocks and pre elements transition */
pre, code {
  transition: background-color 0.3s ease, color 0.3s ease;
}



.navbar .nav-link {
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for zoom and color */
}

.navbar .nav-link:hover {
    transform: scale(1.1); /* Slightly enlarges the navbar link on hover */
    color: #0096c7 !important; /* Optional: change color on hover */
}


.navbar .nav-link.active {
    background-color: transparent; /* Removes the background color */
}

.navbar.dark-mode .nav-link.active {
    background-color: transparent; /* Dark mode active link background */
}



.navbar .nav-link:hover {
    transform: scale(1.1); /* Slightly enlarges the navbar link on hover */
    color: #0096c7 !important; /* Optional: change color on hover */
}


.about-links.subtitle {
  font-family: "Red Hat Text"
}





/* For panel tabset headings in dark mode */
body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link {
  background-color: transparent;
  color: #0096c7; /* Default tab color in dark mode */
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link.active {
  background-color: #343a40; /* Dark background for active tab */
  color: #ffffff; /* White text for active tab */
  border-color: #555 !important; /* Border color to match dark mode */
}

/* Hover effect for tabs in dark mode */
body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link:hover {
  color: #0096c7 !important; /* Lighter blue color on hover */
}






/* Increase the font size for navbar text */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar a {
  font-size: 1.2em !important; /* Adjust this value as needed */
}



body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
}






/* General transition settings for body */
body {
  background-color: #fff;
  color: #495365;
  transition: background-color 0.3s ease, color 0.3s ease;
}



.fa-orcid:before {
    content: url('https://orcid.org/sites/default/files/images/orcid_24x24.png');
    vertical-align: middle;
}


/* Navbar transition */
.navbar, .navbar .navbar-brand, .navbar .nav-link, .navbar a {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transition for the back-to-top button */
.back-to-top {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* Smooth transition for links */
a, .navbar .nav-link, .navbar a {
  transition: color 0.3s ease;
}


/* Code blocks and pre elements transition */
pre, code {
  transition: background-color 0.3s ease, color 0.3s ease;
}



.navbar .nav-link {
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for zoom and color */
}

.navbar .nav-link:hover {
    transform: scale(1.1); /* Slightly enlarges the navbar link on hover */
    color: #0096c7 !important; /* Optional: change color on hover */
}


.navbar .nav-link.active {
    background-color: transparent; /* Removes the background color */
}

.navbar.dark-mode .nav-link.active {
    background-color: transparent; /* Dark mode active link background */
}



.navbar .nav-link:hover {
    transform: scale(1.1); /* Slightly enlarges the navbar link on hover */
    color: #0096c7 !important; /* Optional: change color on hover */
}


.about-links.subtitle {
  font-family: "Red Hat Text"
}





/* For panel tabset headings in dark mode */
body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link {
  background-color: transparent;
  color: #0096c7; /* Default tab color in dark mode */
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link.active {
  background-color: #343a40; /* Dark background for active tab */
  color: #ffffff; /* White text for active tab */
  border-color: #555 !important; /* Border color to match dark mode */
}

/* Hover effect for tabs in dark mode */
body.dark-mode .panel-tabset .nav-tabs .nav-item .nav-link:hover {
  color: #0096c7 !important; /* Lighter blue color on hover */
}






/* Increase the font size for navbar text */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar a {
  font-size: 1.2em !important; /* Adjust this value as needed */
}



body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
}





.about-links .ai {
  border: 2px solid #dee2e6;
  border-radius: 50%;
  padding: 0.4em;            /* give more breathing room */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
  font-size: 1.8em;          /* increase icon size */
  line-height: 1;            /* keeps it centered */
}

.about-links .ai:hover {
  transform: scale(1.2);
  color: #A6CE39;            /* ORCID green */
  border-color: #A6CE39;
}




/* Glow effect for the entire navbar */
.navbar {
  box-shadow: 0 0 15px rgba(98, 151, 205, 0.8); /* soft blue glow */
  transition: box-shadow 0.3s ease;
}

/* On hover, glow brighter */
.navbar:hover {
  box-shadow: 0 0 25px rgba(98, 151, 205, 1);
}


/* Navbar icons glowing effect */
.navbar .nav-link i {
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.navbar .nav-link:hover i {
  color: #ffffff; /* make icon brighter */
  text-shadow: 0 0 10px #0096c7, 0 0 20px #0096c7;
}



/* Base styles for ALL Academicons in about-links */
.about-links .ai {
  border: 2px solid #dee2e6;
  border-radius: 50%;
  padding: 0.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
  font-size: 1.8em;
  line-height: 1;
}

/* ORCID-specific hover */
.about-links a[href*="orcid.org"] .ai:hover {
  transform: scale(1.2);
  color: #A6CE39;        /* ORCID green */
  border-color: #A6CE39;
}

/* Example: CV-specific hover (different color) */
.about-links a[href*="cv"] .ai:hover {
  transform: scale(1.2);
  color: #0096c7;        /* blue for CV */
  border-color: #0096c7;
}



/* Default (light mode): dark hamburger */
.navbar-toggler-icon {
  background-image: none; /* remove Bootstrap default */
  position: relative;
}

.navbar-toggler-icon::before {
  content: "\2630";   /* Unicode hamburger menu ≡ */
  font-size: 1.5rem;
  color: #333;        /* dark for light background */
}

/* Dark mode override: white hamburger */
body.dark-mode .navbar-toggler-icon::before {
  color: #fff;
}