@import url(https://themes.googleusercontent.com/fonts/css?kit=-lTUqgJg2dxbe4D7B5DEIA3jn2WilaVUapNOYl4762s);

.flex-direction-column {
  flex-direction:column;
}


body {
  overscroll-behavior-y: none;
  overflow-x: hidden;
}
body h2:after {
  background-color: #dfdfff;
  bottom: -0.3rem;
  height: 0.3rem;
  width: 14rem;
  position: relative;
  content: "";
  display: block;
}

.text-gray-500{
  color: white;
  opacity: 0.9;

}

.h-5{
  height: 80px;
  width: 80px;
  padding-top: 12px;
}

table.c14 {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

table.c14 th, 
table.c14 td {
  border: 1px solid #dddddd;
  padding: 8px;
}

table.c14 tr:nth-child(even) {
  background-color: #f2f2f2;
}

table.c14 tr:hover {
  background-color: #ddd;
}

table.c14 th {
  background-color: #4CAF50;
  color: white;
  padding-top: 12px;
  padding-bottom: 12px;
}


#scroll {
  writing-mode:vertical-lr;
  top: 15px;
  right: 15px;
  height: calc(100% - 38px - 1.25rem);
  position: absolute;
  z-index: -1;
}
.left-aligned { 
  margin-left: auto; 
}
.bg-dark { 
  background-color: #1c1c1c !important; 
}

.desc{
  margin-top: -530px !important;
  padding-left: 350px;
  padding-right: 350px;
}

/*TABLE OF CONTENTS */
#toc {
  position: sticky;
  position: -webkit-sticky;
  top: 75px;
  left:0;
  padding: 15px;
  margin-left: 4px;
  margin-top: 14px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

a{
  color: #5BC0DE;
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin: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 }

/* DIVIDER */
.divider {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* HERO */
.bg-hero-home {
  height: 100vh;
  text-align: center;
  background-image: url( 'https://static.igem.wiki/teams/5128/eat-methane-new.gif' );
  background-repeat: no-repeat;
  background-attachment:scroll; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color:#1c1c1c;
  background-size: 100% 100%;
  background-position:center;
}
.bg-hero {
  height: 130vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url( 'assets/background.svg' );
  background-repeat: no-repeat;
  background-attachment:scroll; 
  background-size: 100% 100%;
}
.bg-hero .container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
.bg-hero .divider {
  bottom: -30vh;
}
/* HERO-2 */
.bg-hero-2 {
  height:100vh !important;
}
.bg-hero-2 .divider {
  bottom: 0vh;
}

/* ANIMATED STUFFS */
.img-wrapper.rbc {
  position: absolute;
}

@keyframes float1 {
  0% {
      transform: translateY(0) rotate(148deg);
  }
  50% {
      transform: translateY(-50px) rotate(148deg);
  }
  100% {
      transform: translateY(0) rotate(148deg);
  }
}

@keyframes float2 {
  0% {
      transform: translateY(0) rotate(294deg);
  }
  50% {
      transform: translateY(-70px) rotate(294deg);
  }
  100% {
      transform: translateY(0) rotate(294deg);
  }
}

@keyframes float3 {
  0% {
      transform: translateY(0) rotate(185deg);
  }
  50% {
      transform: translateY(-90px) rotate(185deg);
  }
  100% {
      transform: translateY(0) rotate(185deg);
  }
}

@keyframes float4 {
  0% {
      transform: translateY(0) rotate(65deg);
  }
  50% {
      transform: translateY(-100px) rotate(65deg);
  }
  100% {
      transform: translateY(0) rotate(65deg);
  }
}

@keyframes float5 {
  0% {
      transform: translateY(0) rotate(-56deg);
  }
  50% {
      transform: translateY(-110px) rotate(-56deg);
  }
  100% {
      transform: translateY(0) rotate(-56deg);
  }
}

@keyframes float6 {
  0% {
      transform: translateY(0) rotate(142deg);
  }
  50% {
      transform: translateY(-140px) rotate(142deg);
  }
  100% {
      transform: translateY(0) rotate(142deg);
  }
}

@keyframes float7 {
  0% {
      transform: translateY(0) rotate(-244deg);
  }
  50% {
      transform: translateY(-80px) rotate(-244deg);
  }
  100% {
      transform: translateY(0) rotate(-244deg);
  }
}

@keyframes float8 {
  0% {
      transform: translateY(0) rotate(-30deg);
  }
  50% {
      transform: translateY(-70px) rotate(-30deg);
  }
  100% {
      transform: translateY(0) rotate(-30deg);
  }
}

@keyframes float9 {
  0% {
      transform: translateY(0) rotate(213deg);
  }
  50% {
      transform: translateY(-150px) rotate(213deg);
  }
  100% {
      transform: translateY(0) rotate(213deg);
  }
}

@keyframes float10 {
  0% {
      transform: translateY(0) rotate(-10deg);
  }
  50% {
      transform: translateY(-160px) rotate(-10deg);
  }
  100% {
      transform: translateY(0) rotate(-10deg);
  }
}

.img-wrapper {
  position: absolute;
}

.img-wrapper.bc0 {
  scale: 0.4;
  animation: float1 7s ease-out infinite;
  top: 5%;
  right: 5%;
  max-width:13%;
}

.img-wrapper.bc1 {
  scale: 0.5;
  animation: float2 8s ease-out infinite;
  top: 5%;
  left: 10%;
  max-width:15%;
}

.img-wrapper.bc2 {
  scale: 0.6;
  animation: float3 9s ease-out infinite;
  bottom: 10%;
  left: 0%;
  max-width:20%;
}

.img-wrapper.bc3 {
  scale: 0.5;
  animation: float4 10s ease-out infinite;
  bottom: 35%;
  right: 15%;
  max-width:20%;
}

.img-wrapper.bc4 {
  scale: 0.3;
  animation: float5 11s ease-out infinite;
  bottom: -20%;
  right: 5%;
  max-width:13%;
}

.img-wrapper.bc5 {
  scale: 0.6;
  animation: float6 12s ease-out infinite;
  top: 20%;
  left: 25%;
  max-width:13%;
}

.img-wrapper.bc6 {
  scale: 0.7;
  animation: float7 13s ease-out infinite;
  bottom: -15%;
  left: 40%;
  max-width:17%;
}

.img-wrapper.bc7 {
  scale: 0.4;
  animation: float8 14s ease-out infinite;
  bottom: 10%;
  right: 15%;
  max-width:23%;
}

.img-wrapper.bc8 {
  scale: 0.5;
  animation: float9 15s ease-out infinite;
  top: 20%;
  right: 25%;
  max-width:11%;
}

.img-wrapper.bc9 {
  scale: 0.3;
  animation: float10 16s ease-out infinite;
  bottom: -25%;
  left: 15%;
  max-width:19%;
}

.img-wrapper.bc10 {
  scale: 0.7;
  animation: float1 17s ease-out infinite;
  top: 25%;
  left: 5%;
  max-width:22%;
}

/* DIVIDER */
.divider {
    padding: 0;
    margin: 0;
}

/* TYPOGRAPHY */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 11pt;
  font-weight: normal;
}
span {
  scroll-margin-top:52pt;
}
h1 {
  
  font-size: 26pt;
  font-weight: bold;
}

h2 {
  font-size: 20pt;
  font-weight: normal;
}

h3 {
  font-size: 16pt;
  font-weight: normal;
}

h4 {
  font-size: 14pt;
  font-weight: normal;
}

.subtitle {
  font-size: 12pt;
  font-style: italic;
  color: rgb(179, 179, 179);
}
.horizontal-scrollable > .row {
  overflow-x: auto;
}
/* footer */
footer a { 
  color: white; 
  font-weight: bold; 
  text-decoration: none; 
}
footer a:hover { 
  color: white; 
  text-decoration: underline; 
}
footer {
  --footer-background: #335145;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--footer-background);
  padding: 2rem 0;
  margin-top: 10rem;
  box-sizing: border-box;
  z-index: 1000;
  position: relative; /* Added to make sure the footer is the reference point for the bubbles */

  .bubbles {
      position: absolute;
      top: -9rem; /* Adjust this value to control the height of bubbles above the footer */
      left: 0;
      right: 0;
      height: 10rem; /* Adjust height so that bubbles appear above the footer only */
      overflow: hidden; /* Ensure bubbles don't spill outside this area */
      z-index: -1; /* Places bubbles behind the footer */
      filter: url("#goo");

      .bubble {
          position: absolute;
          left: var(--position, 50%);
          background: var(--footer-background);
          border-radius: 100%;
          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
                     bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          transform: translate(-50%, 100%);
      }
  }
}

@keyframes bubble-size {
  0%, 75% {
      width: var(--size, 4rem);
      height: var(--size, 4rem);
  }
  100% {
      width: 0rem;
      height: 0rem;
  }
}

@keyframes bubble-move {
  0% {
      bottom: -4rem;
  }
  100% {
      bottom: var(--distance, 6rem); /* Adjust this value to control how high the bubbles move */
  }
}