@font-face {
    font-family: 'brlnsdb';
    src: url('https://static.igem.wiki/teams/5261/font/brlnsdb.woff')format('woff');
    font-weight: normal;
    font-style: normal;
}

.special-font-1 {
    font-family: 'brlnsdb'; /* 你可以替换成任何你想要的字体 */
    font-size: 60px;
    color: #fff; /* 设置文字颜色，以便发光效果更明显 */
  text-shadow: 
    0 0 10px #ff0000,  /* 红色发光效果 */
    0 0 20px #ff0000,  /* 更远的红色发光效果，增加深度 */
    0 0 30px #ff0000,  /* 更远的红色发光效果，进一步增加深度 */
    0 0 40px #ff0000;  /* 最远的红色发光效果 */
  }
  .special-font-2 {
    font-family: 'brlnsdb'; /* 你可以替换成任何你想要的字体 */
    font-size: 60px;
    color: #fff; /* 设置文字颜色，以便发光效果更明显 */
  text-shadow: 
    0 0 10px #8af378,  /* 红色发光效果 */
    0 0 20px #8af378,  /* 更远的红色发光效果，增加深度 */
    0 0 30px #8af378,  /* 更远的红色发光效果，进一步增加深度 */
    0 0 40px #8af378;  /* 最远的红色发光效果 */
  }
  
  .special-font-3 {
    font-family: 'brlnsdb'; /* 你可以替换成任何你想要的字体 */
    font-size: 60px;
    color: #fff; /* 设置文字颜色，以便发光效果更明显 */
  text-shadow: 
    0 0 10px #384bdb,  /* 红色发光效果 */
    0 0 20px #384bdb,  /* 更远的红色发光效果，增加深度 */
    0 0 30px #384bdb,  /* 更远的红色发光效果，进一步增加深度 */
    0 0 40px #384bdb;  /* 最远的红色发光效果 */
  }
  
  

/*滚动捕捉部分*/
.home-image-container {
    position: relative; /* 确保可以相对于这个容器定位绝对定位的子元素 */
    width: 100vw; /* 宽度为视口的100% */
    height: 100vh; /* 高度为视口的100% */
  }
  
  .home-image-container .img-under {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片覆盖整个容器，不会拉伸 */
  }
  
  
    .overlay-image1 {
      top: 13%; 
      left: 64%;
      position: absolute;
      width: 280px; 
      transition: transform 0.5s ease;
    }
  
    .overlay-image2 {
      width: 900px; 
      top: 39%; 
      left: 52%;
      position: absolute;
      transition: transform 0.5s ease;
    }
  
  

    /*文字+图片进入部分*/
.position-control {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
  }
  
  .home-container {
    display: flex;
    width: 80%;
    margin-top:50px;
    margin-bottom:50px;

  }


  .text-box-1{
    flex: 1;
    margin-left: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent; /* 如果你不需要背景色，可以保持透明 */
    display: flex; /* 将元素设置为Flex容器 */
    flex-direction: column; /* 默认的主轴是垂直的，如果你需要可以指定 */
    justify-content: center; /* 可选，如果你需要内容在水平方向也居中 */
    align-items: center; /* 垂直居中 */
  }
  
    .text-box-plain-1{
      font-size: 37px;
      color: aliceblue;
      font-family: 'brlnsdb';
    }
  
    .right-img-1 {
      width: 600px;
      height: auto;
      object-fit: contain;
      margin: 0 20px;
      /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    } */
    }


    .text-box-2 {
        flex: 1;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        /* background-color: rgb(238, 230, 241); */
        background-color: transparent ;
        /* border-radius: 25px;
        box-shadow: 0 2px 10px rgba(169, 123, 123, 0.6); */
      }

      .text-box-2 {
        flex: 1;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        background-color: transparent; /* 如果你不需要背景色，可以保持透明 */
        display: flex; /* 将元素设置为Flex容器 */
        flex-direction: column; /* 默认的主轴是垂直的，如果你需要可以指定 */
        justify-content: center; /* 可选，如果你需要内容在水平方向也居中 */
        align-items: center; /* 垂直居中 */
        /* 如果需要边框和阴影效果，可以取消下面的注释 */
        /* border-radius: 25px;
        box-shadow: 0 2px 10px rgba(169, 123, 123, 0.6); */
      }

      
    .right-img-2 {
        width: 485px;
        height: auto;
        object-fit: contain;
        margin-top: 0;
        margin-right: 40px;
        margin-bottom: 0;
        margin-left: 20px;

        /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      } */
      }


    .text-box-plain-2{
        font-size: 37px;
        color: rgb(244, 247, 250);
        font-family: 'brlnsdb';
      }

      .special-font-billion {
        font-family: 'brlnsdb'; /* 你可以替换成任何你想要的字体 */
        font-size: 37px;
        color: #d8a24a; /* 设置文字颜色，以便发光效果更明显 */
      }


      .text-box-3{
        flex: 1;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        background-color: transparent; /* 如果你不需要背景色，可以保持透明 */
        display: flex; /* 将元素设置为Flex容器 */
        flex-direction: column; /* 默认的主轴是垂直的，如果你需要可以指定 */
        justify-content: center; /* 可选，如果你需要内容在水平方向也居中 */
        align-items: center; /* 垂直居中 */
        /* 如果需要边框和阴影效果，可以取消下面的注释 */
        /* border-radius: 25px;
        box-shadow: 0 2px 10px rgba(169, 123, 123, 0.6); */
      }
    
      .text-box-plain-3{
        font-size: 37px;
        color: aliceblue;
        font-family: 'brlnsdb';
      }
    
      .special-font-the-use-of {
        font-family: 'brlnsdb'; /* 你可以替换成任何你想要的字体 */
        font-size: 37px;
        color:rgb(76, 245, 96); /* 设置文字颜色，以便发光效果更明显 */
      }


      .right-img-3 {
        width: 600px;
        height: auto;
        object-fit: contain;
        margin: 0 20px;
        /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      } */
      }

.come-from {
    margin-top: 50px;
    margin-bottom: 100px;
    font-size: 80px;
    color:antiquewhite;
    text-align: center; 
    font-family: 'brlnsdb';
    max-width: 1300px; /* 设置最大宽度 */
    margin-left: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
    margin-right: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
}

.therefore {
    margin-top: 50px;
    margin-bottom: 100px;
    font-size: 70px;
    color:antiquewhite;
    text-align: center; 
    font-family: 'brlnsdb';
    max-width: 1300px; /* 设置最大宽度 */
    margin-left: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
    margin-right: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
}


.text-box-4 {
    flex: 1;
    margin-left: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent; /* 如果你不需要背景色，可以保持透明 */
    display: flex; /* 将元素设置为Flex容器 */
    flex-direction: column; /* 默认的主轴是垂直的，如果你需要可以指定 */
    justify-content: center; /* 可选，如果你需要内容在水平方向也居中 */
    align-items: center; /* 垂直居中 */
  }

  .text-box-plain-4{
    font-size: 37px;
    color: aliceblue;
    font-family: 'brlnsdb';
  }

  .right-img-4 {
    width: 600px;
    height: auto;
    object-fit: contain;
    margin-top: 0;
    margin-right: 40px;
    margin-bottom: 0;
    margin-left: 20px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  } */
  }

  .text-box-5{
    flex: 1;
    margin-left: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent; /* 如果你不需要背景色，可以保持透明 */
    display: flex; /* 将元素设置为Flex容器 */
    flex-direction: column; /* 默认的主轴是垂直的，如果你需要可以指定 */
    justify-content: center; /* 可选，如果你需要内容在水平方向也居中 */
    align-items: center; /* 垂直居中 */
  }
  
    .text-box-plain-5{
      font-size: 37px;
      color: aliceblue;
      font-family: 'brlnsdb';
      /* margin-right: 50px; */
    }
  
    .right-img-5 {
      width: 600px;
      height: auto;
      object-fit: contain;
      /* margin: 0 20px; */
      border-radius: 30px; 
      /* margin-right: 50px; */
   
    }


  .this-is-where{
    margin-top: 50px;
    margin-bottom: 100px;
    font-size: 40px;
    color:rgb(245, 245, 245);
    text-align: center; 
    font-family: 'brlnsdb';
    max-width: 1400px; 
    margin-left: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
    margin-right: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
}

.Biomining-technology {
    margin-top: 50px;
    margin-bottom: 100px;
    font-size: 40px;
    color:rgb(247, 247, 247);
    text-align: center; 
    font-family: 'brlnsdb';
    max-width: 1400px; 
    margin-left: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
    margin-right: auto; /* 为了让内容居中，你可能还需要添加自动外边距 */
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    margin: 80px auto; /* 水平居中 */
}