@charset "UTF-8";

.book,
.book-info,
.image-container,
.title-wrappers,
body,
html {
    position: relative
}

:root {
    --primary-color: #b4784c;
    /*字体颜色*/
    --secondary-color: #f5edd7;
    /*背景色*/
    --tertiary-color: #b45522;
    /*阴影颜色*/
    --quaternary-color: #fff;
}

body {
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: kumbh-regular;
    margin: 0;
    background-color: var(--secondary-color);
}

.pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.pages-multicol {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
}

.pages-middle-figure {
    display: flex;
    align-items: center;
    justify-content: center;
}

@font-face {
    font-family: kumbh-bold;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.igem.wiki/teams/4619/wiki/web-assets/web-assets/kumbh-bold.ttf)
}

@font-face {
    font-family: kumbh-regular;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.igem.wiki/teams/4619/wiki/web-assets/web-assets/kumbh-regular.ttf)
}

/* @font-face {
    font-family: bronova-bold;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.igem.org/uploads/teams/5276/wiki/web-assets/bronova-bold.woff)
}

@font-face {
    font-family: bronova-regular;
    font-style: normal;
    font-weight: 400;
    src: url(https://static.igem.org/uploads/teams/5276/wiki/web-assets/bronova-regular.woff)
} */

#p1text p {
    text-align: left;
    padding: 0 0;
    font-family: kumbh-regular;
    font-size: max(3vh, 20px);
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
}

.stressed-p {
    font-family: kumbh-bold;
}

.pages-single-row {
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    display: flex;
    width: 100%;
    margin: 10px auto;
}

.enter {
    animation: enterenter 4.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes enterenter {
    0% {
        letter-spacing: 1em;
        transform: translateZ(200px);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateZ(12px);
        filter: blur(0);
        opacity: 1;
    }
}
/* Lantern is here to help 的 css */
/* 初始状态 */
.animate-on-scroll-heading {
    opacity: 0;
    transform: translateY(50px); /* 初始位置 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 触发动画的类 */
.animate-on-scroll-heading.visible {
    opacity: 1;
    transform: translateY(0); /* 目标位置 */
}

/* Why PLD 左滑进入 */
/* 初始状态 */
.animate-on-scroll-slip {
    opacity: 0;
    transform: translateX(-100%); /* 初始位置在视口左侧 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 触发动画的类 */
.animate-on-scroll-slip.visible {
    opacity: 1;
    transform: translateX(0); /* 目标位置 */
}

.pages-single-row p {
    padding: 0 0;
    font-family: kumbh-bold;
    font-size: max(6vh, 30px);
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
}

.p2text {
    text-align: left;
    padding: 0 0;
    font-family: kumbh-regular;
    font-size: max(3vh, 20px);
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
}

.pages .pages-title {
    top: calc(56px+5vh);
    font-family: kumbh-bold;
    font-size: 5vh;
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
    text-align: center;
    align-items: center;
    padding: auto;
}

#p3text {
    text-align: left;
    padding: 0 0;
    font-family: kumbh-regular;
    font-size: max(3vh, 20px);
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
}

.p4text p,
.p5text p {
    text-align: left;
    padding: 0 0;
    font-family: kumbh-regular;
    font-size: max(3vh, 20px);
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
}

.pages img {
    max-width: 80vh;
    height: auto;
    width:100%;
    align-items: center;
}

.pages-homepage{
    padding-top: 20vh;
    position: relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:90vh;
    width:80vw;
    transition: 0.5s ease-in-out;
    transition-property: all;
}
.pages-homepage-title{/*第一个画面最中央的title*/
    /* font-family: kumbh-bold;
    font-size: 5vh; */
    color: var(--primary-color);
    /* text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
    text-align: center; */
    align-items: center;
    z-index: 10;
    transition: 0.5s ease-in-out;
    transition-property: all;
    position:relative;
    top:38vh;
    z-index:20;
}
.pages-homepage-boxes{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    margin-left: 4vw;
    margin-right: 4vw;
    height:60vh;
    width:50vw;
    z-index:10;
    transition: 0.5s ease-in-out;
    transition-property: all;
}
.box1{
    animation: chaos1 5s infinite forwards;
}
@keyframes chaos1 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0,5vw);
    }
    50% {
        transform: translate(-10vw,-15vw);
    }
    75% {
        transform: translate(5vw,5vw);
    }
    100% {
        transform: translate( 0,0)
    }
}
.box2{
    animation: chaos2 5s infinite forwards;
}
@keyframes chaos2 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-5vw,0);
    }
    50% {
        transform: translate(-5vw,5vw);
    }
    75% {
        transform: translate(5vw,-2.5vw);
    }
    100% {
        transform: translate( 0,0)
    }
}
.box3{
    animation: chaos3 5s infinite forwards;
}
@keyframes chaos3 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0,-5vw);
    }
    50% {
        transform: translate(5vw,7.5vw);
    }
    75% {
        transform: translate(-5vw,-5vw);
    }
    100% {
        transform: translate( 0,0)
    }
}
.box4{
    animation: chaos4 5s infinite forwards;
}
@keyframes chaos4 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(5vw,0);
    }
    50% {
        transform: translate(5vw,-5vw);
    }
    75% {
        transform: translate(-5vw,2.5vw);
    }
    100% {
        transform: translate(0,0);
    }
}
.pages-homepage-box{
    width: auto;
    height: auto;
    z-index:20;
    transition: 0.5s ease-in-out;
    transition-property: all;
}
.pages-homepage-clickbox{
    padding-left: 1vh;
    padding-right:1vh;
    width: auto;
    height: auto;
    z-index:10;
    /* border: #5d91a3 2px solid; */
    transition: 0.5s ease-in-out;
    transition-property: all;
    /* box-shadow: 4px 4px 2px 2px #5d91a3 ; */
}
.pages-homepage-clickbox :hover{
    /* border: #1d637a 3px double; */
    border-radius: 10%;
    transition: 0.5s ease-in-out;
    transition-property: all; 
    transform:scale(1.1);
}
.pages-homepage-clicked.pages-homepage .pages-homepage-clickbox{
    transform: translateY(10vh);
    display:none;
}
.pages-homepage-upperwords{
    font-size: 5vh;
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
    text-align: center;
    align-items: center;
    align-items: center;
    padding: auto;
    position:relative;
    top:-70vh;
    left: -100vw;
    z-index: 20;
    transition: 0.5s ease-in-out;
    transition-property: all;
}
.pages-homepage-logo{
    position:relative;
    width:10vw;
    height: auto;
    top:-60vh;
    right: -100vw;
    z-index:20;
    transition: 0.5s ease-in-out;
    transition-property: all;
}
.pages-homepage-lowerwords{
    position:relative;
    font-family: kumbh-bold;
    font-size: 3vh;
    color: var(--primary-color);
    text-shadow: 0.05em 0.05em 2px rgba(var(--tertiary-colo-r), var(--tertiary-colo-g), var(--tertiary-colo-b) 0.5);
    text-align: center;
    align-items: center;
    padding: auto;
    top:-50vh;
    left: -100vw;
    z-index:20;
    transition: 1s ease-in-out;
    transition-property: all;
    display:flex;
    flex-direction: column;
}
.pages-homepage-clicked .pages-homepage-title{
    position:relative;
    transform: translateX(-100vw);
    transition: 1s ease-in-out;
    transition-property: all;
}
.pages-homepage-clicked .pages-homepage-boxes{
    position:relative;
    transform: translateX(100vw);
    transition: 1s ease-in-out;
    transition-property: all;
}
.pages-homepage-clicked .pages-homepage-upperwords{
    position:relative;
    transform: translateX(100vw);
    transition: 1s ease;
    transition-property: all;
}
.pages-homepage-clicked .pages-homepage-logo{
    position:relative;
    transform: translateX(-100vw);
    transition: 2s ease;
    transition-property: all;
}
.gif3 .pages-homepage-logo{
    position:relative;
    transform: translate(-100vw,-10vh);
    transition: 2s ease;
    transition-property: all;
}
.gif3.gif4 .pages-homepage-logo{
    position:relative;
    transform: translate(-100vw,-100vh);
    transition: 2s ease-in-out;
    transition-property: all;
}
.pages-homepage-clicked .pages-homepage-lowerwords{
    position:relative;
    transform: translateX(100vw);
    transition: 1s ease-in-out;
    transition-property: all;
}
.pages-homepage-clicked .pages-homepage-clickbox{
    display:block;
    transform: translateY(0);
    transition: 1s ease-in-out;
    transition-property: all;
}
.homepage-background{
    content:"";
    position:absolute;
    top: -10vh
}
.pages-homepage-clicked.pages-homepage .homepage-background{
    background-color: #ead483;
    border-radius: 100%; /* 圆角 ，使得形成光圈为圆形*/
    width: 1vw;
    height: 1vw;
    animation : sunout 3s ease forwards;
    z-index: 10;
}
@keyframes sunout{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(50);
    }
}
.logicparts{
    display:none;
    z-index:20;
    
}
.logicparts-div{
    position:absolute;
    top: -5vh;
    width:5vw;
    transform: translateX(-2.5vw);
}
.pages-homepage-clicked.pages-homepage .logicparts{
    display:block;
}
.pages-homepage-clicked #logic-1{
    animation:lo_1 4s ease forwards;
}
@keyframes lo_1{
    0%{
        transform: translate(0,0);
    }
    100%{
        transform: translate(17vw,6vh);
    }
}
.gif3 #logic-1{
    animation:lo_1_1 3s ease forwards;
}
@keyframes lo_1_1{
    0%{
        transform: translate(17vw,6vh);
    }
    100%{
        transform: translate(22vw,20vh);
    }
}
.gif4 #logic-1{
    animation: lo_111 2s ease forwards;
}
@keyframes lo_111 {
    0% {
        transform: translate(22vw,20vh);
    }
    100%{
        transform: translate(12vw,20vh);
    }
}
.pages-homepage-clicked #logic-2{
    animation:lo_2 4s ease forwards;
}
@keyframes lo_2{
    0%{
        transform: translate(0,0) rotate(0deg);
    }
    100%{
        transform: translate(-17vw,6vh) rotate(180deg);
    }
}
.gif3 #logic-2{
    animation:lo_2_2 3s ease forwards;
}
@keyframes lo_2_2{
    0%{
        transform: translate(-17vw,6vh) rotate(180deg);
    }
    100%{
        transform: translate(-22vw,20vh) rotate(0deg);
    }
}
.gif4 #logic-2{
    animation: lo_222 2s ease forwards;
}
@keyframes lo_222 {
    0% {
        transform: translate(-22vw,20vh);
    }
    100%{
        transform: translate(-12vw,20vh);
    }
}

.pages-homepage-clicked #logic-3{
    animation:lo_3 4s ease forwards;
}
@keyframes lo_3{
    0%{
        transform: translate(0,0) rotate(0deg);
    }
    100%{
        transform: translate(14vw,11vh) rotate(30deg);
    }
}
.gif3 #logic-3{
    animation:lo_3_3 3s ease forwards;
}
@keyframes lo_3_3{
    0%{
        transform: translate(14vw,11vh) rotate(30deg);
    }
    100%{
        transform: translate(15vw,20vh) rotate(0deg);
    }
}
.gif4 #logic-3{
    animation: lo_333 2s ease forwards;
}
@keyframes lo_333 {
    0% {
        transform: translate(15vw,20vh);
    }
    100%{
        transform: translate(8vw,20vh);
    }
}


.pages-homepage-clicked #logic-4{
    animation:lo_4 4s ease forwards;
}
@keyframes lo_4{
    0%{
        transform: translate(0,0) rotate(0deg);
    }
    100%{
        transform: translate(10vw,16vh) rotate(60deg);
    }
}
.gif3 #logic-4{
    animation:lo_4_4 3s ease forwards;
}
@keyframes lo_4_4{
    0%{
        transform: translate(10vw,16vh) rotate(60deg);
    }
    100%{
        transform: translate(8vw,20vh) rotate(0deg);
    }
}
.gif4 #logic-4{
    animation: lo_444 2s ease forwards;
}
@keyframes lo_444 {
    0% {
        transform: translate(8vw,20vh);
    }
    100%{
        transform: translate(4vw,20vh);
    }
}
.pages-homepage-clicked #logic-5{
    animation:lo_5 4s ease forwards;
}
@keyframes lo_5{
    0%{
        transform: translate(0,0) rotate(0deg);
    }
    100%{
        transform: translate(-10vw,16vh) rotate(120deg);
    }
}
.gif3 #logic-5{
    animation:lo_5_5 3s ease forwards;
}
@keyframes lo_5_5{
    0%{
        transform: translate(-10vw,16vh) rotate(120deg);
    }
    100%{
        transform: translate(-8vw,20vh) rotate(0deg);
    }
}
.gif4 #logic-5{
    animation: lo_555 2s ease forwards;
}
@keyframes lo_555 {
    0% {
        transform: translate(-8vw,20vh);
    }
    100%{
        transform: translate(-4vw,20vh);
    }
}

.pages-homepage-clicked #logic-6{
    animation:lo_6 4s ease forwards;
}
@keyframes lo_6{
    0%{
        transform: translate(0,0) rotate(0deg);
    }
    100%{
        transform: translate(-14vw,11vh) rotate(150deg);
    }
}
.gif3 #logic-6{
    animation:lo_6_6 3s ease forwards;
}
@keyframes lo_6_6{
    0%{
        transform: translate(-14vw,11vh) rotate(150deg);
    }
    100%{
        transform: translate(-15vw,20vh) rotate(0deg);
    }
}
.gif4 #logic-6{
    animation: lo_666 2s ease forwards;
}
@keyframes lo_666 {
    0% {
        transform: translate(-15vw,20vh);
    }
    100%{
        transform: translate(-8vw,20vh);
    }
}


.dnas{
    display:block;
    z-index:20;
    height:5vh;
}

.dna{
    position:relative;
    display:flex;
    flex-direction:column;
    width:5vw;
    height:5vh;
    z-index:20;
    position: absolute;
    top: 30vh;
    transition: 0.75s linear;
    transition-property: all;
}
.dna_up{
    position:relative;
    display:flex;
    flex-direction:column;
    width:5vw;
    height:5vh;
    z-index:20;
    position: absolute;
    top: 10vh;
    transition: 0.75s linear;
    transition-property: all;
}
.dna_up .dna-div{
    height:0;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    transition: 0.75s linear;
    transition-property: all;
}
.gif4 .dna-div{
    height:4vh;
    transition: 0.75s linear;
    transition-property: all;
}
#dna-1{
    transform: translate(-24vw,0);
}
#dna-2{
    transform: translate(-17vw,0);
}
#dna-3{
    transform: translate(-10vw,0);
}
#dna-4{
    transform: translate(6vw,0);
}
#dna-5{
    transform: translate(13vw,0);
}
#dna-6{
    transform: translate(20vw,0);
}
#dna-7{
    transform: translate(-24vw,0);
}
#dna-8{
    transform: translate(-17vw,0);
}
#dna-9{
    transform: translate(-10vw,0);
}
#dna-10{
    transform: translate(6vw,0);
}
#dna-11{
    transform: translate(13vw,0);
}
#dna-12{
    transform: translate(20vw,0);
}
.dna-div{
    height:0;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    transition: 0.75s linear;
    transition-property: all;
}
.gif3 .dna .dna-div{
    height:4vh;
    transition: 0.75s linear;
    transition-property: all;
}

.dna-bottom{
    content: "";
    background-color:#000000b0;
    width:0;
    height:1vh;
    border-radius: 3px;
    transition: 0.75s linear;
    transition-property: all;
}
.gif3 .dna-bottom{
    width: 5vw;
    transition: 0.75s linear;
    transition-property: all;
}
.dna_up .dna-bottom{
    content: "";
    background-color:#000000b0;
    width:0;
    height:1vh;
    border-radius: 3px;
    transition: 0.75s linear;
    transition-property: all;
}
.gif4 .dna_up .dna-bottom{
    width: 5vw;
    transition: 0.75s linear;
    transition-property: all;
    z-index:20;
}
.dna-a{
    content: "";
    background-color: #b45522;
    width: 0.5vw;
    height:100%;
    border-radius:25% 25% 0 0;
    transition: 0.75s linear;
    transition-property: all;
}
.dna-t{
    content: "";
    background-color: #f3d170;
    width: 0.5vw;
    height:100%;
    border-radius: 25% 25% 0 0;
    transition: 0.75s linear;
    transition-property: all;
}
.dna-c{
    content: "";
    background-color: #5d91a3;
    width: 0.5vw;
    height:75%;
    border-radius: 25% 25% 0 0;
    transition: 0.75s linear;
    transition-property: all;
}
.dna-g{
    content: "";
    background-color: #c8d4a2;
    width: 0.5vw;
    height:75%;
    border-radius: 25% 25% 0 0;
    transition: 0.75s linear;
    transition-property: all;
}

.dna_up .dna-a{
    border-radius:0 0 25% 25% ;
}
.dna_up .dna-t{
    border-radius:0 0 25% 25% ;
}
.dna_up .dna-c{
    border-radius:0 0 25% 25% ;
}
.dna_up .dna-g{
    border-radius:0 0 25% 25% ;
}


.pages .img_gallery {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: end;
    height:44vw;/*用背景图片大小算出来的*/
    width:66vw;
    margin-top: 4vw;
    margin-bottom: 4vw;
    background-size:100% 100%;
    border:#c8d4a2 2px solid;
}/*各组图片展示区*/

.pages .img_gallery.img_wetlab {
    background-image: url("https://static.igem.wiki/teams/5276/wiki/pages/pages-banners/wet-lab.jpg");
}
.pages .img_gallery.img_drylab {
    background-image: url("https://static.igem.wiki/teams/5276/wiki/pages/pages-banners/dry-lab.jpg");
}
.pages .img_gallery.img_hp {
    background-image: url("https://static.igem.wiki/teams/5276/wiki/pages/pages-banners/hp.jpg");
}
.pages .img_gallery .img_display a img {
    z-index:20;/*让内容在用于调整大小的不显示的图片上方，避免二者分开占位*/
    max-width: 18vw;
    height: auto;
    margin: 5px;
    border: #f5edd7 2px solid;
    z-index: 30;
    transition: 0.25s ease-in-out;
    transition-property: all;
}

.pages .img_gallery .img_display a img:hover {
    transform: scale(1.1);
    transition: transform 0.5s;
    border:#c8d4a2 2px double;
    border-radius: 10%;
    transition: 0.1s ease-in-out;
    transition-property: all;
    transform: translateY(-20px);
}

.pages .homepage-banner {
    position: relative;
    z-index: 1;
    padding: 10px;
}

#p6-bg {
    height:auto;
}
#p1-bg {
    top: 56px;
    height:auto;
}