body { 
    padding-top: 56px;
    background-color: #fcffff;
    font-family: 'Lato', sans-serif
    }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #4A6Fa5 !important; }
.bg-menu { background-color: #4a6ea5dc }
.bg-hero { background-color: #abd0dd; }

/* ANIMATIONS */
.fade-from-right {
    opacity: 0;
    transform: translateX(500px);
    transition: opacity 1s, transform 1s;
  }
  
  .fade-from-right.show {
    opacity: 1;
    transform: translateX(0);
  }


/* IMAGE FORMATTING */
.image-2container {
    display: flex;
  }
  
  .image-2container img {
    width: 50%;
  }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

.imageColumn {
  float: left;
  width: 25%;
  padding: 10px;
}

h1 {
  font-family: 'Lato', sans-serif;
  color:#093c58; 
}

h2 {
  font-family: 'Lato', sans-serif;
  color:#166088; 
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #fdfdfd; 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 }

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

/* Table of Contents */
#table-of-contents {
  position: sticky;
  top: 20px; /* Adjust this value as needed to position the TOC below the header */
  background-color: #f2f2f2;
  padding: 10px;
  border: 1px solid #ddd;
  width: 200px; /* Set the width of the TOC */
  max-height: calc(100vh - 1000vw); /* Calculate the max height to avoid overlapping with header and footer */
  overflow-y:scroll; /* Add vertical scroll if the content exceeds max height */
}

/* .moving-article {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
} */

#table-of-contents h2 {
font-size: 16px; /* Adjust the font size as desired */
/* font-weight: bold; */
margin-bottom: 10px; /* Adds spacing below the heading */
color:#166088; /* Link text color */
}

#table-of-contents ul {
list-style-type: none; /* Removes bullet points from the list */
padding-left: 0; /* Removes default left padding */
}

#table-of-contents li {
margin-bottom: 5px; /* Adds spacing between ToC items */
}

#table-of-contents a {
text-decoration: none; /* Removes underline from links */
font-weight: lighter;
font-size: 15px;
color:#476d7a; /* Link text color */
}

#table-of-contents a:hover {
text-decoration: underline; /* Adds underline on hover */
color: #345968;
}

/* Header text styling */
#header-text {
    color:#166088
}

/* Creds to Estonia-TUIT to see how they got theirs to work, change later */
#igem_root {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}
.igem_root {
  /* uncomment later to account for new header */
  /* margin-top: 84px; */
  position: relative;
  width: 100vw;
  overflow-x: hidden;
}

.text_body {
  position:absolute;
  padding-left: 10vw;
}

.footercolumn40 {
  float: left;
  width: 40%;
}


.footercolumn30 {
  float: left;
  width: 30%;
}