/* Fonts */
@font-face {
  font-family: 'LeagueSpartan';
  src: url(https://static.igem.wiki/teams/5087/fonts/leaguespartan-variablefont-wght.ttf);
}

body,
html {
  margin: 0;
  padding: 0;
  background-color: #f3fff8;
}

.bolded-text {
  font-size: 2.5rem;
  color: #714CB9;
  text-align: center;
  font-weight: bold;
  text-align: center;
}

.full-width-image {
  width: 100vw;
  height: auto;
  display: block;
}

.half-width-image {
  width: 50%;
  height: auto;
  margin-left: 20 px;
}

.full-width-rectangle-yellow {
  width: 100%;
  background-color: #cdbef5;
  border-radius: 25px;
  padding: 20px;
  box-sizing: border-box;
  /* Includes padding in the width */
}

.section-1 {
  width: 100%;
  background-color: #f3fff8;
  /* lighter blue */
  padding-bottom: 15%;
  padding-top: 80px;
  box-sizing: border-box;
  /* Includes padding in the width */
  height: auto;
  position: relative;
  display: block;
}

.section-2 {
  display: flex;                  /* 用 Flex */
  justify-content: center;        /* 居中 */
  align-items: flex-start;        /* 顶对齐 */
  background-color: #ace8f1;
  margin: 0;
  padding: 0;
  height: auto !important;        /* 高度跟随内容 */
  min-height: 0 !important;       /* 移除最小高度 */
  overflow: hidden;               /* 避免额外空白 */
}

.section-3 {
  width: 100%;
  background-color: #ffcd4e;
  /* lighter blue */
  padding-top: 0;

  box-sizing: border-box;
  /* Includes padding in the width */
  height: auto;
  margin-top: 0;
}

.section-4 {
  width: 100%;
  background-color: #f3fff8;
  /* lighter blue*/
  padding: 20px;
  box-sizing: border-box;
  /* Includes padding in the width */
  height: auto;
  margin-top: 0;
  position: relative;
  display: block;
  padding-bottom: 0;

}

.section-5 {
  width: 100%;
  background-color: #9ce195ff;
  /* lighter green*/
  padding: 20px;
  box-sizing: border-box;
  /* Includes padding in the width */
  height: 500px;
  position: relative;
  display: block;
  margin-top: 0;
}

.ocean {
  height: 15%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #ace8f1ff;
  margin: 0;
  padding: 0;
}

.wave {
  background: url("https://static.igem.wiki/teams/5087/pics/homepage/fala-1.svg") repeat-x;
  position: absolute;
  width: 100%;
  top: -198px;
  left: 0;
  height: 198px;
  transform: translate(0, 0, 0);
  animation: wave 5s ease infinite alternate;
}

/* Second wave */
.wave:nth-of-type(2) {
  top: -168px;
  animation: swell 4s ease infinite alternate;
  opacity: 1;
}

/* Third wave */
.wave:nth-of-type(3) {
  top: -138px;
  animation: roll 6s ease infinite alternate;
  opacity: 0.7;
}

@keyframes wave {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 0;
  }

  /* Animate background position */
}

@keyframes swell {

  0%,
  100% {
    transform: translate(0, -30px);
  }

  50% {
    transform: translate(0, 5px);
  }
}

@keyframes roll {

  0%,
  100% {
    transform: translate(0, -20px);
  }

  50% {
    transform: translate(0, 10px);
  }
}

.contain {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  box-sizing: border-box;
  /* Includes padding in the width */
  height: auto;
  margin-bottom: 0;
}

.contain-2 {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  box-sizing: border-box;
  /* Includes padding in the width */
  height: auto;
}


.box-1 {
  width: 33%;
  height: auto;
}

.box-3{
  width: 33%;
  height: 100%;
}

.box-5 {
  width: 30%;
  height: auto;
  position: absolute;
  margin-top: 50%;
  margin-left: 85%;

}

.box-3{
  margin-top: 18%;
  transform: translateX(-20%);
}

.box-4 {
  width: 30%;
  position: absolute;
  height: auto;
  margin-left: 5%;
  margin-top: 57%


  
}

.box-5 img {
  margin-left: -97%;
  
}
.box-1 img {
  margin-top: 85px;
}

.box-2 {
  width: 30%;
  height: 100%;
}

.box-6 {
  width: 100%;
  height: 20%;
}


.box-10 { 
  width: 45%;
  height: 85%;
  margin-top: 20px;
  padding-top: 5%;
  padding-bottom: 0;
}

.box-8 {
  width: 40%;
  height: 85%;
  margin-top: 20px;
  padding-bottom: 0;
  margin-top: 8%;
  margin-right: 10%;
  margin-left: 5%;
}


.box-9 {
  width: 45%;
  height: 85%;
  margin-top: 20px;
  padding-bottom: 0;
  bottom: 0;            /* Stick it to the bottom */
}


.box-7 {
  width: 45%;
  height: 85%;
  margin-top: 5%;
  padding-bottom: 0;
  bottom: 0px;
}

.box-11 {
  width: 40%;
  height: auto;
  margin-bottom: 10%;
}

.box-11-2 {
  width: 100%;
  height: auto;
  /* border: #714CB9 2px solid; */
  margin-left: 0px;
  display: block;
  margin: 0 auto;
}

.box-14 {
  width: 45%;
  height: 60%;
  margin-top: 100px;  
  
}
.box-15 {
  width: 50%;
  height: auto;
  margin-bottom: 5%;
}

.box-12 {
  width: 40%;
  height: 45%;
  padding-top: 10%;

  align-items: center;     /* Vertical alignment */
}
.box-12-2 {
  width: 40%;
  height: 45%;
  padding-top: 10%;
  /* border: 2px solid #714CB9; */
  align-items: center;     /* Vertical alignment */

}
.box-13 {
  width: 10%;
  height: 45%;
  padding-top: 10%;
}

.box-16 {
  width: 100%;
  height: 100%;
  margin-bottom: 70px;
}

.box-17{
  width: 50%;
  height: 100%;
  padding-right: 10%;
  margin-top: 18%;
}



.video-frame {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 20px solid #fff4c4;
  border-radius: 15px;
  width: 840px;
  height: 500px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.image-iframe-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;

}

.image-container {
  position: relative;
  width: 100%;
}

/* animations for the page elements */

.floating {  
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 20px); }
  100%   { transform: translate(0, -0px); }    
}


@keyframes slide-in-left {
  from {
    transform: translateX(-100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; 
  }
}

.slide-left-hidden {
  transform: translateX(-100%); 
  opacity: 0;
  visibility: hidden;
}

.slide-left-in-view {
  animation: slide-in-left 2s forwards;
  opacity: 1; 
  transform: translateX(0); 

  visibility: visible;
}


@keyframes slide-in-right {
  from {
    transform: translateX(100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; }
}

.slide-right-hidden {
  transform: translateX(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-right-in-view {
  animation: slide-in-right 2s forwards;
  opacity: 1; 
  transform: translateX(0); 
  visibility: visible; 
}


@keyframes slide-up {
  from {
    transform: translateY(100%); 
    opacity: 0; 
  }
  to {
    transform: translateY(0); 
    opacity: 1; 
  }
}

.slide-up-hidden {
  transform: translateY(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-up-in-view {
  animation: slide-up 2s forwards;
  opacity: 1; 
  transform: translateY(0); 
  visibility: visible; 
}

.counter {
  font-size: 50px;
  font-weight: bold;
  color: #714CB9; 
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}

.overlay {
  width: 100%;
  height: 20%;
  position: absolute;
  text-align: center;
  display: flex;
  z-index: 1;
  top: 10%;
  color: #343a40;
  font-size: 40px;
  font-weight: bold;
  justify-content: center;
}

.overlay-box {
  width: 50%;
}

.header_text {
  margin: 0;
  padding-bottom: 6rem;
  min-width: 500px;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  text-align: center;
  /* font-family: 'LeagueSpartan';
  font-size: 10rem;
  animation: glow 1s ease-in-out infinite alternate;
  color: #714CB9;
  font-weight: bold; */
}
.title-logo {
  width: 40%;          /* 控制大小 */
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

.header_text span {
  display: inline-block;
  margin-right: -0.2em; /* Adjust this value to control the space */
}


@keyframes glow {
  from {
    text-shadow: 0 0 40px #ffd414;
  }
  to {
    text-shadow: 0 0 40px #f9e27b, 0 0 10px #fbf7d6;
  }
}

/* mobile functionality */
@media screen and (max-width: 768px) {


  .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12, .box-13, .box-14, .box-15, .box-17 {
    flex: 1 1 95%; /* Default to full width */
  }

  .box-16 {
    flex: 1 1 110%; /* Default to full width */
    margin-bottom: 0;
  }

  .box-2, .box-5, .box-13, .box-10 {
    display: none; /* Hide box-2 on mobile */
  }

 

  .box-8 img, .box-5 img, .box-16{
    width:100%
  }

  .header_text {
    font-size: 5.2rem;
    padding-right: 40%;
    padding-left: 10%;
  }

  .overlay-box {
    font-size: 20px;
    width:100%
  }

  .video-frame {
    width: 100%;
    height: auto;
  }

  .section-5 {
    height: 300px
  }

}