* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.no-scroll {
  overflow: hidden;
}

/* Font Faces */
@font-face {
  font-family: 'Nunito';
    src: url('https://static.igem.wiki/teams/4225/wiki/nunito-regular.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('https://static.igem.wiki/teams/4225/wiki/nunito-italic.ttf') format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Nunito';
  src: url('https://static.igem.wiki/teams/4225/wiki/nunito-bold.ttf') format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Archivo Black";
  src: url('https://static.igem.wiki/teams/4225/wiki/archivoblack-regular.ttf');
}
@font-face {
  font-family: 'Quicksand';
  src: url('https://static.igem.wiki/teams/4225/wiki/quicksand-variablefont-wght.ttf');
}
@font-face {
  font-family: 'designer';
  src: url(https://static.igem.wiki/teams/4852/wiki/fonts/designer-copy.otf);
}
@font-face {
  font-family: pixel;
  src: url(https://static.igem.wiki/teams/4852/wiki/fonts/ea8iacm9wef3ejpwrrhjge4b6cnlzxhvbkxytbd7tl5-pqe.woff2);
}

body {
  font-optical-sizing: auto;
  font-style: normal;
}

#loading-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #f5f0d5;
  transition: 1s allow-discrete;
  opacity: 1;
}

#loading-wrapper[hidden] {
  opacity: 0;
}

#loading-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #372112;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: 'Nunito';
  font-size: 20px;
}

#loading-content {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #659051;
}

#loading-content:after {
  content: "";
  position: absolute;
  border: 3px solid #d8c890;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

#loading-content:before {
  content: "";
  position: absolute;
  border: 3px solid #a0c657;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

#loading-content {
  border: 3px solid transparent;
  border-top-color: #b7cb83;
  border-bottom-color: #b7cb83;
  border-radius: 50%;
  -webkit-animation: loader 2s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

#loading-content:before {
  border: 3px solid transparent;
  border-top-color: #D4CC6A;
  border-bottom-color: #D4CC6A;
  border-radius: 50%;
  -webkit-animation: loader 3s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 3s linear infinite;
}

#loading-content:after {
  border: 3px solid transparent;
  border-top-color: #d1e4aa;
  border-bottom-color: #d1e4aa;
  border-radius: 50%;
  -webkit-animation: loader 1.5s linear infinite;
  animation: loader 1.5s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.curtain {
  position: relative;
  overflow: hidden;
}

.curtain__scrollbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 25%;
  transform-origin: center bottom;
}
.curtain__scrollbar.skrollable-between {
  position: fixed;
}


.fold {
  position: relative;
  height: 100vh;
  background-position: 50%;
  background-size: cover;
}
.no-touch .fold {
  background-attachment: fixed;
}

.skrollable-between.fold--interior {
  position: fixed;
}
.scrollable-image-container {
  position: relative;
  height: 100vh; /* Full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.scrollable-image-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.scrollable-image-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollable-image {
  width: 100%; /* Ensure the image fits the container width */
  height: auto; /* Maintain aspect ratio */
}
.fold--interior {
  position: absolute;
  top: 0;
  left: 10%;
  height: 100%;
  width: 80%;
}
.curtain {
  position: relative;
  overflow: hidden;
  font-size: initial; /* Reset the font-size to prevent inheritance */
  text-align: center;
}


.curtain__scrollbar:before {
  position: absolute;
  bottom: 1em;
  left: 50%;
  height: 1em;
  width: 1em;
  content: "";
  border: 0.05em solid #fff;
  border-radius: 100%;  
  transform: translate(-50%, 0);
}

.fold:nth-of-type(2) {
  background-image: url(https://static.igem.wiki/teams/5437/index/a-landf.png );

}


.fold:nth-of-type(3) {
  background-image: url(https://static.igem.wiki/teams/5437/index/a-land3.png);
}
/* .fold:nth-of-type(5) {
  background-image: url(https://static.igem.wiki/teams/5437/index/tmp/cszqsys.jpeg);
} */

.fold h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  font-weight: normal;
  transform: translate(0, -50%);
}

#content-wrapper {
  color: #FFF;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
}

#header
{
  width: 800px;
  margin: 0 auto;
  text-align: center;
  height: 100px;
  background-color: #666;
}

#content
{
  width: 800px;
  height: 1000px;
  margin: 0 auto;
  text-align: center;
  background-color: #888;
}

.dengue-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  overflow: hidden;
}

.dengue-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.dengue-header {
  font-family: 'Postno';
  font-size: 3em;
  color: #4E360B;
  z-index: 2;
  text-align: center;
  padding: 0 15px;
  width: 75%;
  margin: 0 auto;
  margin-top: -30px;
}

/* Blinking cursor effect */
#typed-dengue::after, #typed-text::after, #typed-borneol::after, #typed-thatswhy::after {
  content: '|';
  font-size: 1em;
  margin-left: 5px;
  color: #4E360B;
  animation: cursor-blink 0.7s step-end infinite;
  position: relative;
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* DEET and BORNEOL Containers */
.deet-container, .borneol-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.deet-background, .borneol-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.deet-header, .borneol-header {
  font-family: 'Postno';
  font-size: 4em;
  color: #4E360B;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  width: 65%;
}

.deet-highlight {
  color: #d97670;
  font-weight: bold;
}

.blue-highlight {
  color: #2a73cc; 
  font-weight: bold;
}

.borneol-highlight {
  color: #54a951;
  font-weight: bold;
}

.thatswhy{
  color: rgb(242, 233, 216);
  font-weight: bold;
}

.timeline-container {
  position: relative;
  width: 100%;
  height: auto;
}

.long-timeline {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-overlay {
  position: absolute;
  text-align: center;
  color: #54A951;
  font-family: 'postno';
  max-width: 50vw;
  line-height: 1.5;
}

.text-1 {
  top: 6%;
  left: 45%;
}

.text-2 {
  top: 34%;
  right: 48%;
}

.text-3 {
  top: 56%;
  left: 48%;
  max-width: 46vw !important;
}

.text-4 {
  top: 77%;
  left: 10%;
  max-width: 97vw !important;
}

.text-overlay h1 {
  font-size: 3rem !important;
  font-weight: bold;
}

.diagram-container {
  width: 100%;
  margin: 0 auto;
}

.diagram-part {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-part img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 0;
}

.text-right, .text-left {
  position: absolute;
  top: 35%;
  width: 40%;
  color: #4E360B;
  font-family: 'Postno', sans-serif;
  font-size: 12rem;
  z-index: 2;
  padding: 10px;
  box-sizing: border-box;
}

.text-right {
  right: 5%;
  text-align: right;
}

.text-left {
  left: 5%;
  text-align: left;
}

.last-text {
  position: absolute;
  top: 7%;
  left: 10%;
  width: 80%;
  color: #4E360B;
  font-family: 'Postno', sans-serif;
  font-size: 6rem;
  z-index: 2;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}

.interested {
  font-family: 'Postno';
  font-style: normal;
  font-weight: 800;
  text-align: center;
  color: #62b458;
  padding-top: 10vh;
  font-size: 6vw;
  
}

@media (max-width: 1200px) {
  .deet-header, .borneol-header, .dengue-header {
    font-size: 3em;
  }
  .interested {
    font-size: 6vw;
  }

  .timeline-container {
    position: relative;
    width: 100%;
    height: auto !important;
  }
  
  .long-timeline {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }
  
  .text-1 {
    top: 6%;
    left: 45%;
  }
  
  .text-2 {
    top: 30%;
    right: 48%;
  }
  
  .text-3 {
    top: 52%;
    left: 48%;
    max-width: 46vw !important;
  }
  
  .text-4 {
    top: 76%;
    left: 4%;
    max-width: 99vw !important;
  }
  
  .text-overlay h1 {
    font-size: 4vw !important;
    font-weight: bold;
  }
}

@media (max-width: 992px) {
  .deet-header, .borneol-header, .dengue-header {
    font-size: 2.5em;
  }
  .interested {
    font-size: 6vw;
  }

  .timeline-container {
    position: relative;
    width: 100%;
    height: auto !important;
  }
  
  .long-timeline {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .text-1 {
    top: 6%;
    left: 45%;
  }
  
  .text-2 {
    top: 30%;
    right: 48%;
  }
  
  .text-3 {
    top: 52%;
    left: 48%;
    max-width: 46vw !important;
  }
  
  .text-4 {
    top: 76%;
    left: 4%;
    max-width: 99vw !important;
  }
  
  .text-overlay h1 {
    font-size: 4vw !important;
    font-weight: bold;
  }

  
}

@media (max-width: 768px) {
  .deet-header, .borneol-header, .dengue-header {
    font-size: 2.5em;
    width: 97vw;
  }

  .interested {
    font-size: 6vw;
  }

  .timeline-container {
    position: relative;
    width: 100%;
    height: auto !important;
  }
  
  .long-timeline {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .text-1 {
    top: 4%;
    left: 45%;
  }
  
  .text-2 {
    top: 30%;
    right: 48%;
  }
  
  .text-3 {
    top: 52%;
    left: 48%;
    max-width: 46vw !important;
  }
  
  .text-4 {
    top: 75.5%;
    left: 4%;
    max-width: 99vw !important;
  }
  
  .text-overlay h1 {
    font-size: 4vw !important;
    font-weight: bold;
  }

  .scrollable-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200vh;         
    overflow: hidden;     
  }

  .scrollable-image {
    width: 100%;          
    height: 200vh;       
    object-fit: cover;  
  }

}

@media (max-width: 576px) {
  .deet-header, .borneol-header, .dengue-header {
    font-size: 2.5em;
    width: 95vw;
  }

  .interested {
    font-size: 6.5vw;
  }

  .timeline-container {
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .long-timeline {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .text-1 {
    top: 4%;
    left: 45%;
  }
  
  .text-2 {
    top: 30%;
    right: 48%;
  }
  
  .text-3 {
    top: 52%;
    left: 48%;
    max-width: 46vw !important;
  }
  
  .text-4 {
    top: 74%;
    left: 2%;
    max-width: 99vw !important;
  }
  
  .text-overlay h1 {
    font-size: 4vw !important;
    font-weight: bold;
  }

  .scrollable-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200vh;         
    overflow: hidden;     
  }

  .scrollable-image {
    width: 200%;          
    height: 200vh;       
    transform: translateX(-25%); 
    object-fit: cover;  
  }
}

@media (max-width: 400px) {
  .deet-header, .borneol-header, .dengue-header {
    font-size: 2em;
    width: 100vw;
  }
  
  .interested {
    font-size: 6.5vw;
  }

  .timeline-container {
  position: relative;
  width: 100%;
  height: auto;
}

  .long-timeline {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .text-1 {
    top: 2%;
    left: 45%;
  }

  .text-2 {
    top: 27%;
    right: 48%;
  }

  .text-3 {
    top: 49%;
    left: 48%;
    max-width: 46vw !important;
  }

  .text-4 {
    top: 72%;
    left: 2%;
    max-width: 99vw !important;
  }

  .text-overlay h1 {
    font-size: 3.8vw !important;
    font-weight: bold;
  }

  .scrollable-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;         /* Full viewport height */
    overflow: hidden;      /* Hide overflow from the image */
}

.scrollable-image {
    width: 200%;           /* Double the width to show only the center 50% */
    height: 200%;          /* Show full height */
    transform: translateX(-25%); /* Shift the image left to center it */
    object-fit: cover;     /* Ensure the image maintains its aspect ratio */
}


}