::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #afbfad;
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 32px;
}


/* 定义一个类，应用到需要渐变背景的元素上 */
.gradient-background {
    position: absolute;
    /* 使用linear-gradient创建从上到下的渐变 */
    background: linear-gradient(to bottom,rgb(234, 238, 238), #f3d8c3, #4d613c);
    /* 从红色渐变到蓝色 */
    /* 确保背景覆盖整个元素 */
    width: 100%;
    height: 16790px;
    /* 可选：添加一些内边距或边框以美化效果 */
    padding: 20px;
    box-sizing: border-box;
    left: 0px;
}
section.marquee {
    overflow: hidden;
    height: 10vw;
}

h1.marquee {
    white-space: nowrap;
    position: relative;
    top: 5vw;
    font-family: 'atomicage', sans-serif;
    font-weight: 800;
    color: #302013;
    text-shadow: 0px 0px 3px #576c4624;
    animation: title-marquee 10S linear infinite;
    font-size: 3.14vw;

}

@keyframes title-marquee {
    from {
        transform: translateX(0);
        clip-path: polygon(6.2vw 0, 95vw 0, 95vw 100vw, 6.2vw 100vw);
    }

    to {
        transform: translateX(-46.1vw);
        clip-path: polygon(52.3vw 0, 141.1vw 0, 141.1vw 100vw, 52.3vw 100vw);
    }
}
.homepage-cover {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    z-index: 0;
    padding: 2rem 9%;
    margin-top: -65px;
    
}

.homepage-cover .bg-container img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
h1.home-page-title {
    --mid-title-transform: translateX(0) translateY(0);
    transition: 1s transform;
    height: fit-content;
    margin: 0;
    z-index: 20;
    position: relative;
    margin-left: 2vw;
    top: -40vw;
    font-family: "marmelad";
    font-size: 6vw;
    color: transparent;
    text-align: center;
    line-height: 150%;
    background: linear-gradient(20deg,
        #e1d7d6 0%, #e7aeae 33%,
        transparent 33%, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #7b847370);
  }

  h1.home-page-title::before {
    text-align: center;
    transition: 1s transform;
    transform: var(--mid-title-transform);
    content: 'Have you ever imagined to curing genetic diseases with a single injection ?';
    color: transparent;
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(20deg,
        transparent 0%, transparent 33%,
        #785c57 33%, #946868 66%,
        transparent 66%, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #7b847370);
  }

  h1.home-page-title::after {
    text-align: center;
    content: 'Have you ever imagined to curing genetic diseases with a single injection ?';
    color: transparent;
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(20deg,
        transparent 66%,
        #946868 66%, #302013 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #7b847370);
  }

  /*标题旁边的碎片*/
  img.triangle-1 {
    z-index: 30;
    position: relative;
    width: 5.36vw;
    left: 39vw;
    top: -17vw;
    opacity: 0;
    transform: translateY(1.82vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #7a949780);
  }

  img.triangle-2 {
    z-index: 30;
    position: relative;
    width: 2.7vw;
    left: 60vw;
    top: -25vw;
    opacity: 0;
    transform: translateX(-2vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #FB96FF80);
  }

  img.triangle-3 {
    z-index: 30;
    position: relative;
    width: 4.35vw;
    left: 78vw;
    top: -16vw;
    opacity: 0;
    transform: translateY(1.82vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #C696FF80);
  }
  @keyframes fade-in {
    0% {
      opacity: 0
    }

    70% {
      opacity: 1
    }

    100% {
      opacity: 1
    }
  }
  h3.home-text-3 {
    font-family: marmelad;
    padding:10vw;
    font-size: 4vw;
    color:#302013;
    text-shadow:0 0 2px #302013ad;
    z-index:0;
}
@keyframes typing {
  from {
      width: 0;
  }

  to {
      width: 100%;
  }
}

#ecoli {
    animation: ecoli 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
  }
  
  @keyframes ecoli {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
  }

#plasmid1 {
  animation: plasmid1 2s infinite alternate-reverse ease;
  transform-origin: 70% 10% 0;
}

@keyframes plasmid1 {
  from {
      transform: rotate(-0.5deg)
  }

  to {
      transform: rotate(0deg) translateX(-0.3%)
  }
}
#plasmid2 {
    animation: plasmid2 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes plasmid2 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#plasmid3 {
    animation: plasmid3 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes plasmid3 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#plasmid4 {
    animation: plasmid4 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes plasmid4 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#plasmid5 {
    animation: plasmid5 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes plasmid5 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#plasmid6 {
    animation: plasmid6 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes plasmid6 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
  
#cas1 {
    animation: cas1 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes cas1 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}

#cas2 {
    animation: cas2 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes cas2 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#cas3 {
    animation: cas3 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes cas3 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#scene-5-svg-celebrate2 {
    animation: scene-5-svg-celebrate2 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes scene-5-svg-celebrate2 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}
#scene-5-svg-celebrate4 {
    animation: scene-5-svg-celebrate4 2s infinite alternate-reverse ease;
    transform-origin: 70% 10% 0;
}
@keyframes scene-5-svg-celebrate4 {
    from {
        transform: rotate(-0.5deg)
    }
  
    to {
        transform: rotate(0deg) translateX(-0.3%)
    }
}




.view-more-horizontal-button {
    background: linear-gradient(to bottom, #c696ff 0%, #fb96ff 50%, #ffa3d7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    width: fit-content;
    position: relative;
    left: 40%;
    text-decoration: underline 3px !important;
    z-index: 10;
}

.view-more-horizontal-button a {
    text-align: center;
    color: transparent;
    font-size: 20PX;
    font-weight: 700;
    text-decoration: underline 3px !important;
}

.view-more-horizontal-button:hover a {
    text-align: center;
    color: transparent;
    font-size: 20PX;
    font-weight: 700;
    text-decoration: underline 3px !important;
}

.view-more-horizontal-arrow {
    transform: translateX(0) rotate(-90deg);
    transition: 1s;
}

.view-more-horizontal-button:hover .view-more-horizontal-arrow {
    transform: translateX(140px) rotate(-90deg);
}
h1.team-title {
	font-family: lemon;
    font-size: 6vw;
    color:transparent;
    text-align:center;
    line-height:150%;
    background: linear-gradient(160deg,
    #abd6dd 0%, #d4c7d4 50%, #abd6dd 100%
    );
    background-clip:text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #ffa3d780);
}
.subbfoot{
    color: transparent;
    background: #fffef8;
    background-clip: text;
    -webkit-background-clip: text;
    /* filter: drop-shadow(0px 0px 2px #ebf0f280); */
}
a:hover{
    color:#a9d1ca;
}

section.homepage-navigation {
    position: relative;
    top: 0;
    transition: 1s;
    width: 70%;
    left: 15%;
    height: fit-content;
}

.homepage-navigation {
    height: fit-content;
    transition: 1s;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    /* margin: 0 200px 0px 200PX; */
    /* margin-bottom: 50%; */
}

.homepage-navigation div {
    /* padding: 80px 100px; */
    width: 23%;
    margin-bottom: 20%;
}

.homepage-navigation div a {
    display: block;
    width: 100%;
    height: fit-content;
}

div.icon-link-text {
    position: relative;
    filter: drop-shadow(0px 0px 1x #e1d8dd86);
    font-family: 'Montserrat';
    font-weight: 700;
    width: 100%;
    top: 16vw;
    padding: 0;
    text-align: center;
    font-size: 1.6vw;
    color: #d3d1d7;
}

div.layered-icon:hover div.icon-link-text {
    animation: float-up 0.5s ease, colorchange 1s linear infinite alternate;
}

@keyframes colorchange {
    from {
        color: #d6e493;
    }

    to {
        color: #3e71ac;
    }
}

.layered-icon img {
    width: 100%;
}
.history h1 {
    color: #ffffff;
    text-align: center;
    padding-top: 50px;
    font-size: 130px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    word-spacing: 10px;
}

.history h2 {
    color: #fafafa;
    text-align: center;
    padding-top: 25px;
    padding-right: 8%;
    padding-bottom: 10px;
    font-size: 70px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.iframe-center {
        position: relative;
        left: 50%;
        transform: translate(-50%, -50%);
    }

div.layered-icon:hover img.icon-layered-1{
    animation: layered-1-ani 1s ease-in-out infinite alternate;
}
@keyframes layered-1-ani {
    from {
        transform: translateY(5px);
    }
    to {
        transform: translateX(0) translateY(0);
    }
}


.history {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    font-family: 'CustomFont', sans-serif;
    padding: 0 5%;
}

.history .history-1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3%;
    margin-bottom: 40px;
}

.history .history-1 {
    background-color: #78a1a38b;
    border-radius: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.text {
    color: #874545;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
}

.hover-text {
    color: #0c0c0c;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
    font-family:marmelad;
}

.history-1 .text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.history-1 .text {
    width: 50px;
    height: 100px;
}

.history-1:hover {
    background-color: #527a7c8b;
}

.history-1:hover .text {
    opacity: 0;
}

.history-1 .hover-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-1:hover .hover-text {
    opacity: 1;
}
#finger{
    position: relative;
    top: -20px;
    left: 600px;
}
.second {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    font-family: 'CustomFont', sans-serif;
    padding: 0 5%;
}

.second .history-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3%;
    margin-bottom: 40px;
}

.second .history-2 {
    background-color: #85a5918b;
    border-radius: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.text {
    color: #874545;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
}

.hover-text {
    color: #0c0c0c;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
    font-family:marmelad;
}

.history-2 .text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.history-2 .text {
    width: 50px;
    height: 100px;
}

.history-2:hover {
    background-color: #78a3888b;
}

.history-2:hover .text {
    opacity: 0;
}

.history-2 .hover-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-2:hover .hover-text {
    opacity: 1;
}

.third {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    font-family: 'CustomFont', sans-serif;
    padding: 0 5%;
}

.third .history-3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3%;
    margin-bottom: 40px;
}

.third .history-3 {
    background-color: #9aa3788b;
    border-radius: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.text {
    color: #874545;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
}

.hover-text {
    color: #0c0c0c;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
    font-family:marmelad;
}

.history-3 .text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.history-3 .text {
    width: 50px;
    height: 100px;
}

.history-3:hover {
    background-color: #919c688b;
}

.history-3:hover .text {
    opacity: 0;
}

.history-3 .hover-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-3:hover .hover-text {
    opacity: 1;
}
.fourth {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    font-family: 'CustomFont', sans-serif;
    padding: 0 5%;
}

.fourth .history-4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3%;
    margin-bottom: 40px;
}

.fourth .history-4 {
    background-color: #a0b8ad8b;
    border-radius: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.text {
    color: #874545;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
}

.hover-text {
    color: #0c0c0c;
    font-size: 35px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-spacing: 8px;
    text-align: justify;
    font-family:marmelad;
}

.history-4 .text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.history-4 .text {
    width: 50px;
    height: 100px;
}

.history-4:hover {
    background-color: #a0b8ad8b;
}

.history-4:hover .text {
    opacity: 0;
}

.history-4 .hover-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-4:hover .hover-text {
    opacity: 1;
}