/* Check */
body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #f5f5dc !important; color: #333 !important; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 800

.syne-<uniquifier> {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* --- FOOTER --- */
.footer {
  color: black !important;
}

.footer a {
  color: black !important;
}

.footer a:hover {
  color: #333333; 
}

/* --- MENU --- */
.navbar-toggler {
  border: none;
  background: none;
  color:black
}

.navbar-toggler-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  color:black ;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: black; /* Change the color to black */
  display: block;
  transition: all 0.3s;
}

.navbar-toggler-icon span {
  top: 50%;
  transform: translateY(-50%);
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  bottom: -8px;
}

.navbar-toggler.collapsed .navbar-toggler-icon::before {
  transform: translateY(11px) rotate(45deg);
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
  transform: translateY(-11px) rotate(-45deg);
}

.navbar-toggler.collapsed .navbar-toggler-icon span {
  transform: scale(0);
}

/* Hide the menu initially */
.collapse {
  display: none;
}

.collapse.show {
  display: block;
}

/* Couleur du texte de la barre de navigation en noir */
.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: black !important;
}

/* Réduire la taille des logos */
.navbar-logo {
  height: 50px; /* Ajustez la hauteur selon vos besoins */
  max-width: 180px; /* Ajustez la largeur selon vos besoins */
  margin-right: 5px;
}

/* Ajuster l'espacement et la barre de séparation */
.navbar-divider {
  color: black;
  margin: 0 10px;
  font-weight: bold;
}

@media (max-width: 576px) {
  .navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .navbar-logo {
    margin-bottom: 5px;
  }
  
  .navbar-divider {
    display: none;
  }
}







/* ----------------------- MEMBERS ----------------------- */ 








/* <--- HOMEPAGE ---> */

/*#preloader {
  background: rgb(255, 255, 255) url(https://static.igem.wiki/teams/5422/gifloading.gif) no-repeat center center ;
  height: 80vh;
  width: 85%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  z-index: 9999;
}*/


/*.loader img {
  max-width: 100px; /* Ajustez cette valeur selon la taille souhaitée 
  width: 100%;
  height: auto;
}

#preloader {
  background-color: white;
  background: rgb(255, 255, 255) url(https://static.igem.wiki/teams/5422/gifloading.gif) no-repeat center center;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease; /* Transition pour une disparition en douceur 
}

#preloader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: -1;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader img {
  max-width: 100px; Taille fixe pour l'image 
  width: 100px;  Taille fixe pour l'image 
  height: auto;
}  */



/* gradient source: https://uigradients.com/#Wiretap */
/* decreased transparency to 80% */
.highlight {
  background-image: linear-gradient(to right, #200122, #6f0000);
  border-radius: 6px;
  padding: 2px 4px;
  color: white;
  font-size: 23px;
}

.highlight2 {
  background-image: linear-gradient(to right ,#649173,#3E5151, #DBD5A4);
  border-radius: 0px;
  padding: 5px 10px;
  color: white;
  font-size: 28px;
}


.highlightbeets {
  background-image: linear-gradient(to right, #eef5e5, #ACBB78);
  border-radius: 3px;
  padding: 1px 3px;
  color: black;
}

.highlighttomatoes {
  background-image: linear-gradient(to right, #a73737, #7a2828);
  border-radius: 3px;
  padding: 1px 3px;
  color: white;
}

.highlightcereals {
  background-image: linear-gradient(to right, #CAC531, #F3F9A7);
  border-radius: 3px;
  padding: 1px 3px;
  color: black;
}

.highlight3 {
  color: white;
  background-color: none;
  background: linear-gradient(90deg, #005210 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  border-radius: 6px;
  opacity: 0; /* Initial state: hidden */
  transition: opacity 0.5s ease-in-out; /* Smooth transition */
}

.highlight3.visible {
  opacity: 1; /* Make visible when in view */
  -webkit-animation: 1.5s highlight 0s 1 normal forwards;
  animation: 1.5s highlight 0s 1 normal forwards;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}

:root {
  --font: #414141;
  --underline: #004a0f;
  --menu-height: 80px; 
}

/* Styles for links with class "anim" */
a.anim {
  transition: all 300ms ease-out;
}

a.anim:hover {
  font-size: 1.4rem;
}

a.anim:hover ~ cr {
  width: 100%;
}

/* Styles for the cr element */
cr {
  width: 0px;
  height: 3px;
  background: var(--underline);
  border: var(--underline);
  margin: 0px;
  transition: width 450ms ease-out;
}


  mark {
    color: white;
    -webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
            animation: 1.5s highlight 1.5s 1 normal forwards;
    background-color: none;
    background: linear-gradient(90deg, #1f4037 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    border-radius: 6px;
    font-size: 28px;
  }
  
  @-webkit-keyframes highlight {
    to {
      background-position: 0 0;
    }
  }
  
  @keyframes highlight {
    to {
      background-position: 0 0;
    }
}