* {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
}
html, body {
    height: 100%;
    /* overflow-x: hidden;  */
    /* 不加的话移动端右边和下边会出现白框。下边是由于fixed导致的，不过这也是由于右边大了fixed元素才下去了
        原因是那右引号往右边移出了一个屏幕范围，不知道为什么左引号往左移动不会出现这种情况。
        事后发现不能加在这里，会影响后面JS中的scroll事件监听，无法触发scroll事件                 */
}
.app {
    background-color: #9d2932;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.section {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: visible;
}

.box {
    background-color: indianred;
    transition: background-color 1s;
}

.section-content {
    color: hsla(0, 0%, 100%, .5);
    font-size: 70px;
    font-weight: 200;
    position: relative;
}


.section-content p {
    /* box-shadow: .3em .3em 1em black; */
    text-shadow: .3em .3em .4em rgba(0, 0, 0, .3);
}

.section div:before {
    content: open-quote;
    font-size: 100px;
    font-weight: bold;
    position: absolute;
    top: -20px;
    left: -60px;
}

.section div:after {
    content: close-quote;
    font-size: 100px;
    font-weight: bold;
    position: absolute;
    bottom: -20px;
    right: -60px;
}

.section-title {
    font-size: 70px;
    position: fixed;
    left: .14em;
    bottom: .7em;
    color: white;
    font-weight: 200;
    line-height: 70px;
    word-spacing: -.5em;
    user-select: none;
    z-index: 11;
}

.section-title::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 30px;
    border-top: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
}

.section-title span{
    display: inline-block;
    box-sizing: border-box;
    word-spacing: normal;
}

.section-color {
    font-weight: 100;
    font-size: 120px;
    color: hsla(0, 0%, 100%, .1);
    position: fixed;
    right: 20px;
    top: 20px;
    opacity: 1;
    transition: opacity .4s;
    user-select: none;
}

.button {
    box-sizing: border-box;
    padding: 12px 30px;
    color: white;
    background-color: #e88fa7;
    margin-top: 20px;
    position: relative;
    /* box-shadow: 0 0 1px 21px #e88fa7; */
    cursor: pointer;
    z-index: 10;
}

.button:hover {
    animation: buttonAni1 .4s ease-in .1s 1 forwards,buttonAni2 .2s ease-in .5s 1 backwards;
}

@keyframes buttonAni1 {
    40% {
        transform: scale3d(.7,.7,1);
    }
    55% {
        transform: scale3d(.7,.7,1);
    }
    100% {
        transform: scale3d(1.2,1.2,1);
        background-color: rgb(253,156,182);
    }
}
@keyframes buttonAni2 {
    0% {
        box-shadow: 0 0 1px 0px rgba(233,143,167,0); 
    }
    50% {
        /* box-shadow: 0 0 1px 17px rgba(233,143,167,.4);  */
        box-shadow: 0 0 1px 10px rgba(233,143,167,.3); 
    }
    100% {
        /* box-shadow: 0 0 1px 17px rgba(233,143,167,.4);  */
        box-shadow: 0 0 1px 20px rgba(233,143,167,0); 
    }
}

/* .section { 
    transform-style: preserve-3d;
    当该元素的父元素中（广义，包含祖先元素）有元素的 transform 或 perspective 的值不是 none， 
                         该元素就会相对于这个父元素而不是视口进行定位!!!! 
} */

/* .button::before {
    content: "";
    background-color: black;
    transform: scale3d(.5,.5,-1);
    opacity: .4;
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;/* 不知道为什么只要设置content: "";和absolute之后，再设置t0l0b0r0，伪元素就和原来的元素一样大了，
                    不需要设置margin，也不需要width和height *\/
}    */ 

/* .section:nth-of-type(2) h2 span, .section:nth-of-type(2) span{
    opacity: 0;
}
.section:nth-of-type(3) h2 span, .section:nth-of-type(3) span{
    opacity: 0;
}
.section:nth-of-type(4) h2 span, .section:nth-of-type(4) span{
    opacity: 0;
} */
.section:nth-of-type(1) h2 span{
    opacity: 0;
    transform: translateY(100%);
    z-index: 1;
}
.section:nth-of-type(2) h2 span{
    opacity: 0;
    transform: translateY(100%);
    z-index: 1;
}
.section:nth-of-type(3) h2 span{
    opacity: 0;
    transform: translateY(100%);
    z-index: 1;
}
.section:nth-of-type(4) h2 span{
    opacity: 0;
    transform: translateY(100%);
    z-index: 1;
}
/* .section:nth-of-type(1) h2 span:hover{
    opacity: 0;
    transform: translateY(-100%);
    transition: all 1s;
    z-index: 1;
} */

.section:nth-of-type(2) h2{
    opacity: 0;
    /* transition: opacity 1s; */
    /* z-index: -1; */
    /* transition: all 1s; */
}
.section:nth-of-type(3) h2{
    opacity: 0;
    /* transition: opacity 1s; */
    /* z-index: -1; */
    /* transition: all 1s; */
}
.section:nth-of-type(4) h2{
    opacity: 0;
    /* transition: opacity 1s; */
    /* z-index: -1; */
    /* transition: all 1s; */
}

.section-color {
    opacity: 0;
    transition: opacity 1s;
}

.Home {
    position: fixed;
    bottom: 10px;
    right: 30px;
    z-index: 99;
    
}