/* ############################## Base elements ############################## */
.all {
  background: linear-gradient(to bottom, 
      rgb(53, 44, 177)0%,
      #f51889 3%,
      rgb(140, 140, 255) 10%,  /* First color starts at 10% */
      rgb(220, 219, 255) 25%,  
      #f7f3fd 80%  /* Second color starts at 30% */
  );
  overflow-x: hidden;
}

.main{
  display: flex;
  justify-content: start;
  flex-direction: column;
  margin: 0;
  width: 60%;
/*     padding: 0;
*/}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  margin: 0;
/*     padding: 0; */
}

.pin-placer {
  display: flex;
  justify-content: center;
}

.pin-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rem;
  min-width: 60rem;
  height: auto;
/*     position: sticky;
  top: -300px; 
  z-index: 80;  */
}

.counter-container {
  font-size: 3em;
  font-weight: bold;
  margin: 20px 0;
}

.counter-box{
  background-color:rgba(255, 255, 255, 0.323);
  color: black;
  border-radius: 15px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 20px;
  text-align: center;
  min-width: 50%;
}

/* ############################## Path elements ############################## */

.horizontal_path {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;	
  height: 30vh;
  margin: 0;
}

.vertical_path {
  display: flex;
  justify-content: center;
  max-width: 50%;
  min-width: 20%;	
  max-height: 100%;
  margin: 0;
}

.anchor {
 /*  background-color: rgb(255, 0, 0); */
  width: 1px !important;	
  height: 1px !important;
  z-index: 100;
  margin: 10rem; /* necessary to keep the lipids in place after loading screen */
}

.anchor.lung1 {
  margin: 0;
  position: absolute;
  top: 5%;
  left: 49%;
/*     background-color: rgb(255, 0, 0);  */
}

.guidepoint {
/*     background-color: rgb(255, 0, 0); */
  width: 1px !important;	
  height: 1px !important;
  z-index: 100;
  position: absolute;
}

.guide1 {
  left: 49%;
  top: 36%; 
}

.guide2 {
  left: 28.4%;
  top: 45%; 
}

.guide3 {
  left: 28.4%;
  top: 47.8%; 
}

.guide4 {
  left: 28.4%;
  top: 47%; 
}

/* ############################## Container ############################## */
/* Every container who has a moving child element needs position: relative; */

.special{
  flex-direction: column;
}

/* parent of plasmid */
.startpoint {
  position: relative;
}

/* parent of svg-container that holds bilipids */
.lipid-container {
  top: 6.875rem; /* 110px converted to rem */
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 0.5rem;
  width: 100%;
}

/* parent of svg-container that holds bilipids */
.lipid-container2 {
  top: 6.875rem; /* 110px converted to rem */
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 19rem;
}

.plasmid_container{
  position: absolute;
  width: 4rem;
  height: 4rem;
  z-index: 100;
  scale: 1;
}

.plasmid_container2{
  position: absolute;
  width: 4rem;
  height: 4rem;
  z-index: 100;
  scale: 1;
  opacity: 0;
}

.svg-container {
  position: absolute;
  height: 0.5rem;
  transform-origin: 155px 50px; /* Moves the origin 50 units above the top-left corner */
  z-index: 100;
}

.svg-1 {
  height: 1em;
  stroke-width: 5;
  fill: none;
  overflow: visible;
}

  .path1 {
/*         stroke: rgb(69, 241, 155); */
      z-index: 100;
      visibility: visible;
      position: absolute;
      stroke-width: 1;
  }

  .bilipid {
      position: absolute;
      width: 1.25rem; /* 20px converted to rem */
      height: 2.5rem; /* 40px converted to rem */
      z-index: 100;
  }
  
  .bilipid img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Ensures the image scales correctly within the container */
  }

.svg-container2 {
  position: absolute;
  height: 0.5rem;
  transform-origin: 155px 50px; /* Moves the origin 50 units above the top-left corner */
  z-index: 100;
  opacity: 0;
}

.svg-2 {
  height: 1em;
  stroke-width: 5;
  fill: none;
  overflow: visible;
}

  .path2 {
/*         stroke: rgb(69, 241, 155); */
      z-index: 100;
      visibility: visible;
      position: absolute;
      stroke-width: 1;
  }

  .bilipid2 {
      position: absolute;
      width: 1.25rem; /* 20px converted to rem */
      height: 2.5rem; /* 40px converted to rem */
      z-index: 100;
  }

  .bilipid2 img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Ensures the image scales correctly within the container */
  }

.lung-container {
  position: relative;
  width: 100%;
  height: auto;
/*     transform-origin: 27% 30%;
  transform: scale(7); */
}
  .arrow {
    position: absolute;
    width: 12%;
    top: 48%;
    left: 25%;
    opacity: 0; 
    transform: rotate(7deg);
  }
  .text {
      position: absolute;
  }
      .lung_text1 {
          width: 30%;
          top: 15%;
          left: 60%;
          opacity: 0; 
      }
      .lung_text2 {
          width: 25%;
          top: 54%;
          left: 10%;
          scale: 80%;
          opacity: 0;
          p{
              font-size: 1.5rem;
          }
      }


  .biofilm-alive {
      position: absolute;
      width: 30%;
      top: 43%;
      left: 15%;
      transform: translateZ(0);
  }

          .biofilm_text1 {
              scale: 10%;
              opacity: 0;
              z-index: 110;
              left: -26%;
              top: -32%;
          }
          .biofilm_text2 {
              scale: 10%;
              opacity: 0;
              z-index: 110;
              left: -10%;
              top: -30%;
          }
          .biofilm_text3 {
              scale: 10%;
              opacity: 0;
              z-index: 110;
              left: 3%;
              top: -47%;
          }
          .biofilm_text4 {
              scale: 10%;
              opacity: 0;
              z-index: 110;
              left: 3%;
              top: -30%;
          }

          #amp_test{
            top: 48%;
            left: 40%;
            width: 3%; 
        }


      .bakterium-container {
          position: absolute;
          width: 28%;
          top: 39%;
          left: 32%;
          transform: translateZ(0);
      }

          .bilipid_bacterium {
              position: absolute;
              width: 1.25rem; /* 20px converted to rem */
              height: 2.5rem; /* 40px converted to rem */
              z-index: 100;
              scale: 0.25;
              display: block;
          }
          
          .bilipid_bacterium img {
              width: 100%;
              height: 100%;
              object-fit: contain; /* Ensures the image scales correctly within the container */
          }
          
          .bilipid_bacterium2 {
              position: absolute;
              width: 1.25rem; /* 20px converted to rem */
              height: 2.5rem; /* 40px converted to rem */
              z-index: 100;
              scale: 0.25;
              /* display: none; */
          }
          
          .bilipid_bacterium2 img {
              width: 100%;
              height: 100%;
              object-fit: contain; /* Ensures the image scales correctly within the container */
          }

          .amp{
              position: absolute;
              z-index: 111;
              width: 10%; 
              opacity: 0;
              transform: translateZ(0);
          }
          #amp1{
              top: 9%;
              left: 25%;
          }
          #amp2{
              top: 19%;
              left: 29%;
          }
          #amp3{
              top: 8%;
              left: 57%;
          }
          #amp4{
              top: 18%;
              left: 59%;
          }


  .biofilm-dead {
      position: absolute;
      width: 30%;
      top: 75%;
      left: 9%;
      opacity: 0;
  }

/* ############################## Objects / Images ############################## */




/* ############################## smaller screens < 1000px  ############################## */

/* mobile elements are not visible on bigger screens */
.mobile{
  display: none;
}

@media (max-width: 1001px) {
  .horizontal_path{
    display: none;
  }
  .vertical_path{
    display: none;
  }
  .lung-container{
    display: none;
  }
  .pin-placer{
    display: none;
  }
  .pin-container{
    display: none;
  }
  .mobile{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 80vw;
    height: auto;
    /* background-color: rgb(251, 255, 255); */
  }
  
  .omv-container, .lipo-container {
    width: auto; /* Adjust the width as needed */
    height: 18vh; /* Adjust the height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

  .omv-container img, .lipo-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.main {
  width: 90vw;
  max-width: 100vw;
}
}
/*
@media screen and (max-width: 1000px){
  .explore-container{
    display: inline-block;
  }
}*/

.explore-container {
  justify-content: center;
}

.explore-button {
  width: 30%;
}

@media screen and (max-width: 1250px){
  .explore-button{
    width: 40%;
    padding-bottom: 0px;
  }

  .top_mobile1{
    flex-direction: column;
    margin-bottom: 2rem;
  }

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

@media screen and (max-width: 600px){
  .counter-container{
    font-size: 1.25em;
  }
  .counter-box{
    min-height: 220px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
  }
}


/* ############################## Secret Button ############################## */
@font-face {
  font-family: 'Space';
  src: url('https://static.igem.wiki/teams/5057/solarspacedemoregular-jr9ao.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class*="btn-glitch-"] {
  display: inline-block;
  font-family: "VT323", monospace;
  border: 1px solid white;
  color: white;
  padding: 10px 13px;
  min-width: 175px;
  line-height: 1.5em;
  white-space: no-wrap;
  text-transform: uppercase;
  cursor: pointer;
  .text,
  .decoration {
    display: inline-block;
  }
  .decoration {
    display: inline-block;
    /* float: right; */
  }
  &:hover, &:focus {
    animation-name: glitch;
    animation-duration: 0.2s;
    background-color: yellow;
    color:black;
    border: 1px solid yellow;
    .text-decoration {
      animation-name: blink;
      animation-duration: 0.1s;
      animation-iteration-count: infinite;
    }
    .decoration {
      animation-name: blink;
      animation-duration: 0.1s;
      animation-iteration-count: infinite;
    }
    :before {
      content: " ";
      width: 15px;
      border: 1px solid black;
      position: absolute;
      right: 25%;
      bottom: 3px;
      transform: rotate(35deg)
    }
    :after {
      animation-name: shrink;
      animation-duration:.5s;
      animation-iteration-count: 1;
      animation-fill-mode : forwards;
      content: " ";
      width: 75%;
      border: 1px solid black;
      position: absolute;
      left: 0;
      bottom: 5px;
    }
  }
  &:active {
    background: none;
    color:yellow;
    .text-decoration {
      animation-name: none;
    }
    .decoration {
      animation-name: none;
    }
    :before, :after {
      display: none;
    }
  }
}

@keyframes glitch {
  25% {
    background-color: red;
    transform: translateX(-10px);
    letter-spacing: 10px;
  }
  35% {
    background-color: green;
    transform: translate(10px);
  }
  59% {
    opacity: 0;
  }
  60% {
    background-color: blue;
    transform: translate(-10px);
    filter: blur(5px);
  }
  100% {
    background-color: yellow;
    blur: (5px);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes shrink {
  100% {
    width: 10%;
  }
}




/* ############################## Loading Screen ############################## */
/* Prevent scrolling when loader is visible */
.loading {
  position: fixed;
}

/* Pre-loader CSS */
.page-loader{
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: fixed;
  background: #fdfdfd;
  z-index: 1100;
  text-align: center;
  .txt{
      position: relative;
      text-transform: uppercase;
      letter-spacing: 0.3rem;
      font-weight: bold;
      line-height: 1.5;
  }
}
.spinner {
  position: relative;
  top: 15%;
  width: 70vw;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
}

.spinner img {
width: 100%;
height: 100%;
display: block;
}

.video-container {
  border: solid 5px #f51889; 
  border-radius: 15px;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  width: 100%; 
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}