body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #4a4a4a !important; }
.bg-hero { background-color: #45b06cff; }


/* 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 }
/*Define the font-face */
@font-face {
  font-family: 'Aboreto-Regular'; /* You can name this whatever you like */
  src: url('https://static.igem.wiki/teams/5363/aboreto-regular.woff') format('truetype'), /* For TTF file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Broadway-Regular'; /* You can name this whatever you like */
  src: url('https://static.igem.wiki/teams/5363/broadway-regular.woff') format('woff'); /* For TTF file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bell-MT'; /* You can name this whatever you like */
  src: url('https://static.igem.wiki/teams/5363/century.woff') format('woff'); /* For WOFF file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'STIXTwoText';
  src: url('https://static.igem.wiki/teams/5363/stixtwotext-wght.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'STIXTwoText';
  src: url('https://static.igem.wiki/teams/5363/stixtwotext-italic-wght.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}



/* Step 3: Use the font in a class */
.STIXTwoText {
  font-family: 'STIXTwoText', sans-serif; /* 'sans-serif' is a fallback */
}

.Aboreto-Regular {
  font-family: 'Aboreto-Regular', sans-serif; /* 'sans-serif' is a fallback */
}

.Broadway-Regular {
  font-family: 'Broadway-Regular', sans-serif; /* 'sans-serif' is a fallback */
}

.Bell-MT {
  font-family: 'Bell-MT', sans-serif; /* 'sans-serif' is a fallback */
}

.H1 {
  font-size: 36px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.H2 {
  font-size: 28px;
  margin-top: 12px;
  margin-bottom: 12px;
  font-style: bold;
}

.H3 {
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-style: bold;
}

.H4 {
  font-size: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-style: italic; /* This makes the text italic */
}

.Figfn {
  font-size: 14px;
  text-align: center; /* Centers the footnote */
  margin-top: 10px; /* Adds space above the footnote */
  margin-bottom: 20px; /* Adds space below the footnote */
  color: #555; /* Makes the text slightly grey for better readability */
  font-style: italic; /* Makes the footnote italic */
}

.img-fluid {
  margin-top: 6px;
  margin-bottom: 6px;
}

.blog-picture {
  display: block; /* Ensures the image behaves like a block element */
  margin-left: auto; /* Automatically calculates left margin */
  margin-right: auto; /* Automatically calculates right margin */
  margin-top: 6px; /* Optional: Adds space above the image */
  margin-bottom: 6px; /* Optional: Adds space below the image */
  max-width: 100%; /* Ensures the image is responsive */
  height: auto; /* Ensures the image retains its aspect ratio */
}


.Text {
  font-size: 18px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.ParallelPoints {
  margin-bottom: 15px
}

/* Test Usage */
.mar-0 {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: start; /* Aligns text to the left, adjust as necessary */
}

.word-container {
  margin: 0;
  padding: 0;
  line-height: 0.5;
  display: block; /* Ensures each word is on its own line */
}

/* Additional styling to adjust spacing */
.word-container:first-child {
  margin-bottom: 10px; /* Adjust the spacing between "Human" and "Practices" */
}

.test-blue {
  background-color: blue;
}

.test-yellow {
  background-color: yellow;
}

.white-text {
  color: white;
}

.white-text {
  color: #4a4a4a;
}

#body-blogs {
  background-color: #f8f5ea;
}

.test-green {
  background-color: green;
  border: #5bc0de;
  border-width: 2px;
}

.abs-position{
  position: absolute;
}

#lightbackground{
  background-color: #f8f5ea;
}

.light-text-color{
  color: #f8f5ea;
}

.dark-text{
  color: #4a4a4a
}

#dounet{
  top: 300px;
  left: 80%;
  z-index: -1;
}

.test-height-large {
  height: 700px;
}

.test-height-mid {
  height: 300px;
}

.test-height-ml {
  height: 400px;
}

.horizontal-line {
  height: 2px;
  background-color: #red;
  width: 100%;
  margin: 0px 0;
}

@media (max-width: 600px) {
  #custom-img {
      width: 600px; /* Set the desired maximum width */
      max-width: 100%;
  }
}

.logo {
  width: 30px;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Fix layout issues */
}

.textwithshadow{

  text-shadow:
        -3px -3px 0.5px #f8f5ea,   /* Top-left shadow */
         3px -3px 0.5px #f8f5ea,   /* Top-right shadow */
        -3px  3px 0.5px #f8f5ea,   /* Bottom-left shadow */
         3px  3px 0.5px #f8f5ea;   /* Bottom-right shadow */
}

/* Sidebar Container */
/* General Sidebar Styles */
#sidebar {
  position: sticky;
  top: 120px;
  max-height: 80vh;
  overflow-y: auto;
  margin-right: 20px;
  padding-right: 10px;
  scrollbar-width: thin;
}

/* Custom Scrollbar Styles for Webkit-based browsers */
#sidebar::-webkit-scrollbar {
  width: 8px;
}

#sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.sidebar-list {
  list-style-type: none;
  padding-left: 0;
}

.sidebar-list li {
  margin: 10px 0;
}

/* Styling for H1 Links */
.sidebar-link-h1 {
  display: block;
  font-family: 'Bell-MT';
  font-weight: bold;
  font-size: 1.2em;
  color: #4a4a4a;
  line-height: 1.1;
  padding-left: 0;
}

/* Styling for H2 Links */
.sidebar-link-h2 {
  display: block;
  font-family: 'Bell-MT';
  font-size: 1.1em;
  color: #4a4a4a;
  line-height: 1.1;
  padding-left: 20px;
}

/* Styling for H3 Links */
.sidebar-link-h3 {
  display: block;
  font-family: 'Bell-MT';
  font-size: 1em;
  color: #4a4a4a;
  line-height: 1.1;
  padding-left: 40px;
}

.sidebar-list a {
  text-decoration: none;
  color: inherit;
}

.sidebar-list a:hover {
  text-decoration: underline;
}


.navbar {
  background-color: rgba(248, 245, 234, 0.8); /* Background color with 0.8 opacity */
  color: #4a4a4a; /* Ensure the text color remains readable */
}

/*Profile Card*/
/* Add smooth transition for hover effects */
#ProfCard:hover {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

/* Section styling */
section {
  float: left;
  width: 100%;
  background: #fff;
  padding: 30px 0;
}

/* Profile Card 5 specific styles */
.profile-card-5 {
  margin-top: 60px;
}

.profile-card-5 .btn {
  border-radius: 2px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 7px 20px;
}

.profile-card-5 .card-img-block {
  width: 91%;
  margin: 0 auto;
  position: relative;
  top: -20px;
}

.profile-card-5 .card-img-block img {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.profile-card-5 h5 {
  color: #4e5e30;
  font-weight: 600;
}

.profile-card-5 p {
  font-size: 14px;
  font-weight: 300;
}

.profile-card-5 .btn-primary {
  background-color: #4e5e30;
  border-color: #4e5e30;
}

/* Additional styles for card switching */
.profile-card {
  display: none; /* Hide all cards by default */
}

.profile-card.active {
  display: block; /* Show only the active card */
}

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

#card-title {
  color: #4a4a4a;
  font-family: Aboreto-Regular, sans-serif;
}

#card-text {
  color: #4a4a4a;
  font-family: Bell-MT, sans-serif;
}

pre {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer {
  width: 100%;
}