body {
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgb(223,243,236);

    max-width: 100%;
    overflow-x: hidden;  /* 隐藏水平滑动条 */
}

/* 容器样式 */
.home-container {
    width: 100vw;
    margin:0;
    top:0;
    left:0;
    height:100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

#home-part-1{
    width: 100%;
    height: 120vh;
    margin-left: 0;
    top:0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: rgb(223,243,236);
    transition: background-color 2s ease;
}

#home-part-2{
    width: 100%;
    height: 120vh;
    margin-left: 0;
    top:0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: rgb(129,180,215);
    transition: background-color 2s ease;
}

#home-part-3{
    width: 100%;
    height: 120vh;
    margin-left: 0;
    top:0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: rgb(86,213,175);
    transition: background-color 2s ease;
}

#home-part-4{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: rgb(223,243,236);
    transition: background-color 2s ease;
}

#home-part-5{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: rgb(129,180,215);
    transition: background-color 2s ease;
}

#part-1{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
}

#part-2{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:-80vh;
    position: relative;
}

#part-3{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
}

#part-4{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:-80vh;
    position: relative;
}

#part-5{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
}

#part-6{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:-80vh;
    position: relative;
}

#part-7{
    width: 100%;
    height: 100vh;
    margin-left: 0;
    top:0;
    position: relative;
}

.hidden {
  opacity: 0;
}

.big-img{
    position: absolute; 
    width:100%;
    height:100%;
}

#text-header{
    color: rgb(60,85,169);
    top:0;
    margin-left:0;
    font-size: 20px;
    padding: 1% 2%;
    z-index: 10;
}

#title {
    position: absolute; 
    width:100%;
    height:100%;
    top: 0; 
    left:0;
    transform-origin: 50% 100%;
    animation: swing 2.5s cubic-bezier(.05,.91,.5,1) 1;
}

@keyframes swing {
    0%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

#rocket {
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    left:0;
    transform-origin: 50% 100%;
    animation: fly 2.5s cubic-bezier(.05,.91,.5,1) 1;
}

@keyframes fly {
    from{
        transform: rotate(-90deg);
    }
    to{
        transform: rotate(0deg);
    }
}

@keyframes go-up {
    0%{
        transform: translateY(0vh);
    }
    100%{
        transform: translateY(-200vh);
    }
}

#earth {
    position: absolute;
    width:60%;
    height:auto;
    top:40%;
    left: 20%;
    animation: rotate 2.5s cubic-bezier(.05,.91,.5,1) 1;
    z-index:3;
}

@keyframes rotate {
    0%{
        transform: rotate(-240deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes rotate-out {
    0%{
        transform: translateY(0vh) rotate(0deg);
    }
    100%{
        transform: translateY(-200vh) rotate(-180deg);
    }
}

#spacecraft{
    top:0;
    left: 0;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(100vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        transform: translateY(0vh);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

@keyframes h-scroll {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    48% {
        opacity: 1;
        transform: translateX(-100vw);
    }
    49% {
        opacity: 0;
        transform: translateX(-100vw);
    }
    50% {
        opacity: 0;
        transform: translateX(100vw);
    }
    51% {
        opacity: 1;
        transform: translateX(100vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#unrecyclable{
    top:0;
    left:0;
}

@keyframes sway-in {
    0% {
        opacity: 0;
        transform: translateY(10vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes v-sway {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2vh);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes high-level {
    0%{
        z-index: 10;
    }
    100%{
        z-index: 10;
    }
}

@keyframes v-sway-up {
    0% {
        transform: translateY(100vh);
    }
    50% {
        transform: translateY(102vh);
    }
    100% {
        transform: translateY(100vh);
    }
}

@keyframes cover-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes cover-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#cyclewhite{
    top:50vh;
    left:0;
}

#faologo{
    top:0;
    left:0;
}

@keyframes circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes circle-out {
    0% {
        transform: translateY(0vh), rotate(0deg);
    }
    100% {
        transform: translateY(100vh), rotate(360deg);
    }
}

@keyframes show {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

#cycleblue{
    top:0;
    left:0;
}

#astronaut{
    top:0;
    left:0;
}

@keyframes little-swing {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(0deg);
    }

}
#decomposer{
    top:0;
    left:0;
}

#function{
    top:0;
    left:0;
}

#shewa{
    top:0;
    left:0;
}

@keyframes h-move-r {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes h-move-cl {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(-100vw);
    }
}

@keyframes h-move-cr {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(100vw);
    }
}

@keyframes h-move-l {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes color-wb {
    0%{
        background-color: rgb(223,243,236);
    }
    100%{
        background-color: rgb(129,180,215);
    }
}

@keyframes color-bw {
    0%{
        background-color: rgb(129,180,215); 
    }
    100%{
        background-color: rgb(223,243,236);
        
    }
}

#universe{
    top:0;
    left:0;
}

#shewacycle{
    top:0;
    left:0;
}

@keyframes drop-in {
    0% {
        opacity: 0;
        transform: translateY(-100vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}

.home-text{
    margin:0 auto;
}

#text-1{
    position: relative;
    font-size: 3vw;
    color: rgb(223,243,236);
    text-align: center;
    width:80%;
    height:40%;
    top:60%;
    left:10%;
}

#text-2{
    position: relative;
    font-size: 3vw;
    color: rgb(38,96,187);
    text-align: center;
    width: 80%;
    height: 30vw;
    top: 30%;
    left: 10%;
    padding: 5%;
    background-color: rgb(223,243,236);
}

#text-3{
    position: relative;
    font-size: 3vw;
    color: rgb(223,243,236);
    text-align: center;
    width:80%;
    height:40%;
    top:10%;
    left:10%;
}

#text-4{
    position: relative;
    font-size: 3vw;
    color: rgb(223,243,236);
    text-align: center;
    width: 50%;
    /* height: 50%; */
    top: 30%;
    left: 25%;
}

#text-5{
    position: relative;
    font-size: 3vw;
    color: rgb(38,96,187);
    text-align: center;
    width:80%;
    height:40%;
    top:60%;
    left:10%;
}

#text-6{
    position: relative;
    font-size: 3vw;
    color: rgb(223,243,236);
    text-align: left;
    width:40%;
    height:40%;
    top:2%;
    left:2%;
}

#text-7{
    position: absolute;
    font-size: 2vw;
    color: rgb(38, 96, 187);
    text-align: right;
    width: 70%;
    height: auto;
    bottom: 2%;
    left: 28%;
}

#text-8{
    position: absolute;
    font-size: 1.8vw;
    color: rgb(38,96,187);
    text-align: left;
    width:22%;
    height:40%;
    top:7%;
    left:2%;
}

#text-9{
    position: absolute;
    font-size: 1.8vw;
    color: rgb(38, 96, 187);
    text-align: right;
    width: 25%;
    height: 40%;
    top: 7%;
    right: 2%;
}


#down-button{
    opacity: 1;
}

#Scroll{
    opacity: 1;
}