body {
  font-family: 'Nunito', sans-serif;
  background-color: #ececec;
}

strong, b {
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.display-bold-1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.2;
}

.display-bold-2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1.2;
}

.display-bold-3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.2;
}

#referencesAccordion .accordion-button {
  font-weight: 700 !important;
}

#referencesAccordion a {
  color: #192736 !important;
}

.page-background {
  background-image: url('https://static.igem.wiki/teams/5795/wikiassets/backgrounds/long-background.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 2px;
  position: relative;
}

.page-wrapper {
  background-color: rgba(25, 39, 52, 0.9);
  color: #ececec;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 
      0 8px 16px rgba(236, 236, 236, 0.2),
      0 0 14px rgba(236, 236, 236, 0.3),
      0 0 28px rgba(236, 236, 236, 0.1);
}

.intro-text {
  background-color: #192734;
  color: #ececec;            
  border-radius: 1rem;    
  padding: 1.5rem;
  text-align: center;        
}

.citation {
  font-size: 0.9em;
  vertical-align: super;
  cursor: pointer;
  text-decoration: none;
}

.shiny-image {
  position: relative;
  overflow: hidden; 
  display: inline-block;
}

.shiny-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pseudo-element for the shine */
.shiny-image::after {
  content: '';
  position: absolute;
  top: 100%;    
  left: 100%;    
  width: 50%;   
  height: 200%;    
  background: linear-gradient(
    45deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.5) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: rotate(45deg);  /* diagonal */
  pointer-events: none;
}

/* Animate the shine fully across */
.shiny-image:hover::after {
  animation: full-shine 1s forwards;
}

@keyframes full-shine {
  0% {
    top: 100%;
    left: 100%;
  }
  100% {
    top: -65%;   /* stop earlier */
    left: -65%;  /* hold there */
  }
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }

/* TOC */
#toc {
  padding: 1.2rem;
  padding-bottom: 0.5rem;
  background-color: rgba(25, 39, 52, 0.9);
  color: #ececec;
  border-radius: 1rem;
  box-shadow: 
      0 8px 16px rgba(236, 236, 236, 0.2),
      0 0 14px rgba(236, 236, 236, 0.3),
      0 0 28px rgba(236, 236, 236, 0.1);
}

#toc-list li {
  padding: 0.25rem; 
}

#toc-list li + li::before {
  content: '';
  display: block;
  height: 1px;
  background-color: #ececec; 
  margin-bottom: 0.25rem;     
}

#toc-list li.active,
#toc-list li.active a {
  font-weight: 700; 
}

#toc.sticky-top {
  top: 2rem !important;
}

#toc a {
  text-decoration: none;
  color: #ececec;
  font-size: 0.8rem;
}

.experiment-image {
    max-width: 100%;
    margin: 20px auto;
    overflow: hidden;
}

.experiment-image img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

.experiment-image .caption {
    margin-top: 10px;
    font-style: italic;
    color: #ececec;
}

/* 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: 1.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 }

/* footer */
footer a { color: #192734; font-weight: bold; text-decoration: none; }
footer a:hover { color: #192734; text-decoration: underline; }

a { color: #b0d4f4; }

@media (min-width: 992px) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #192734;
    border-radius: 6px;
    border: none;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #0f1a22;
  }
}

@media (max-width: 992px) {
  html, body {
    overflow-x: hidden; 
  }
}

.resource-box {
  border: 2px solid #6c757d;
  border-radius: 8px;
  padding: 20px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.02);
}

.resource-box:hover {
  border-color: #a01241;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(110, 13, 45, 0.3);
  background-color: rgba(110, 13, 45, 0.05);
}

.resource-box h5 {
  margin-bottom: 0;
  font-size: 1rem;
}