body{
    margin:0;
    line-height:2.5em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
}
*,
*::before,
*::after {
    box-sizing:border-box;
}
#home {
    display: flex;
    justify-content: center;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0.05) 10px), repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0.05) 10px);
    height: calc(100vh - 53px);
}
#home #homeContent{
    position:absolute;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    flex-flow:column nowrap;
}
    #home #homeContent .title {
        font-size: 1.5em;
        line-height: 2em;
        text-shadow: 0 0 10px #c06;
    }
    #home #homeContent .content {
        border: 1px solid white;
        border-width: 1px 0;
        padding: 0.5em;
        box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.49);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(#c3c3c3 20%,#7885a9 80%);
    }
.profile {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: solid 0.5em rgba(255,255,255,0.5);
    background-size: 218px;
    background-position-x: 0px;
    background-position-y: -50px;
    background-clip: padding-box;
    margin-top:-50px;
}
#contact {
    /*height:calc(100vh - 100px);*/
    height: calc(100vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#nav-line {
    height:0;
}
nav {
    display: flex;
    background-color: #04040499;
    transition: background-color .65s ease-out;
    color: white;
    justify-content: center;
    width:100%;
}
    nav a {
        color:white;
        text-decoration:none;
    }
    nav a:active {
        color: black;
       
    }
.navFixed {
    top:0;
    z-index:2;
    position:fixed;
}
nav div {
    padding: 1em 0.5em;
    display: block;
    position: relative;
    display: flex;
    text-align: center;
    overflow: hidden;
    flex: auto;
    justify-content: center;
    flex: 0 1 100px;
}
    nav div::after, nav div.active::after {
        content: " ";
        position: absolute;
        transform: translateY(-100px);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        /*background-color: rgba(206, 206, 206, 0.15);*/
        background-image: linear-gradient(rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0.57));
        transition: all 0.2s cubic-bezier(.68,-0.55,.27,1.55);
    }
    nav div:hover::after, nav div.active::after {
        transform: translateY(0);
        opacity: 1;
        z-index: -1;
    }
    nav div:hover, nav div.active{
        color: #095eb7;
        transform: scaleY(1.1);
        transition: all 0.2s cubic-bezier(.68,-0.55,.27,1.55);
        cursor:pointer;
    }

        nav div:hover::before, nav div.active::before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: #095eb7;
        }
        #background-slider{
            display: block;
            position: fixed;
            height:100%;
            width:100%;
            z-index:-1;
            top:0;
            left:0;
            overflow:hidden;
        }
            #background-slider ul {
                margin: 0;
                padding: 0;
                height: 100%;
                position: relative;
                transition: none;
                left: -100vw;
                
            }

            .backgroundColor{
                background-color:white;
            }
.line-decoration {
    height:100px;
    background-image:repeating-linear-gradient(45deg,transparent 0,transparent 10px,white 10px,white 20px);
    overflow:hidden;
}
.line-decoration2 {
    height: 100px;
    background-image: repeating-linear-gradient(90deg,transparent 0,transparent 30px,rgba(255, 255, 255, 0.24) 30px,rgba(255, 255, 255, 0.24) 40px);
    overflow: hidden;
    margin-top: 10px;
}
.section-decoration {
    position: relative;
    margin-top: 10px;
}
.background-decoration {
    background-image: linear-gradient(to bottom left,transparent 0%,transparent 80%,rgba(241, 241, 164, 0.43) 80%,rgba(241, 241, 164, 0.43) 100%), linear-gradient(160deg,transparent 0%,transparent 70%,rgba(241, 241, 164, 0.43) 70%,rgba(241, 241, 164, 0.43) 100%), linear-gradient(205deg,transparent 0%,transparent 0%,rgba(241, 241, 164, 0.43) 50%,rgba(241, 241, 164, 0.43) 100%);
    /*transition: opacity 1s ease-in-out;*/
    
}

.section-decoration:before, .section-decoration:after {
    content: " ";
    display: block;
    position: absolute;
    top: -10px;
    height: 5px;
    background-color: white;
    width:100%;
}
 .section-decoration:after {

        bottom: -10px;
        top:initial;

    }
.shadow-left {
    background-color: #dadcdc;
    box-shadow: inset 8px 0px 5px -5px #00000099, 4px 0px 5px -2px #00000099;
}

.section-title {
    color: #ffffff;
    font-size: 2.2em;
    line-height: 100px;
    text-align: center;
    text-shadow: 0 3px 4px black;
    white-space: nowrap;
}
            .container{
                max-width:1024px;
                
                margin:0 auto;
                display:flex;
                overflow:hidden;
            }
            .column-left,.column-right{
                width:50%;
                padding:3em 15px;
            }

/*skill panel*/
.flex{
    display:flex;
}
.skill-bigtitle {
    width: 2em;
    height: 2em;
    padding: 0.5em;
    border-radius: 50%;
    font-size: 2em;
    text-align: center;
    line-height: 1em;
    background-color: #00ace4;
    box-shadow: 4px 4px 5px grey;
    color: white;
    flex: 0 0 auto;
    /*align-self: center;*/
    margin-top: 1.2em;
}
.skill-subtitle {
    text-align:center;
    font-size:1.5em;
    padding-bottom:2em;
}
.skill-wrapper {
    flex: 0 1 100%;
    margin:3em 0;
}
.skill-icon {
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
    padding:0 1em;
}
.skill-icon-box {
    display: inline-block;
    height: 1em;
    width: 1em;
    background-color: deepskyblue;
    border-radius: 0.2em;
    position: relative;
    margin: 0 1em;
}
    .skill-icon-box:after {
        content: " ";
        display: block;
        height: 0.1em;
        width: inherit;
        transform: rotate(45deg);
        background-color: white;
        /* top: -90.2em; */
        /* left: 0.218em; */
    }
    .skill-icon-box:before {
        content: " ";
        display: block;
        height: inherit;
        width: inherit;
        transform: rotate(45deg);
        background-color: deepskyblue;
        /* border-radius: 0.2em; */
        position: absolute;
        top: -0.2em;
        left: 0.018em;
    }
.skill-item {
    padding:0 1em;
   
}
.blood-slut {
    background-color: #d9d9d9;
    height: 1em;
    border-radius: 1em;
    margin-left:3em;
}

.blood {
    background-color: #434343;
    height: 1em;
    border-radius: 1em;
    
    
}
    .blood:after {
        content: attr(data-long);
        color: rgba(255, 255, 255, 0.53);
        display: block;
        line-height: 1.4em;
        font-size: 0.6em;
        text-align: right;
        padding-right: 0.3em;
    }

@media (max-width: 767px) {
    .container {
    flex-wrap:wrap;
    
    }
    .column-left, .column-right {
        width: 100%;

    }
    .skill-item {
        margin-left: -5em;
    }
    #slideLeft2, #slideRight2 {
        margin-top:-25em;
    }
}

.column-content {
    padding:1em;
}
.quot:before, .quot:after {
    content: "\"";
    font-size:2em;
    color:grey;
}
.weixin{
    text-align:center;
}
.weixin img{
    width: 200px;
}
.audio{

}
footer {
    background-color: #131313;
    color: grey;
    padding: 1em 0;
    text-align: center;
    position:relative;
}

/*for choosing the theme of the website*/
#colorPanel {
    z-index: 1;
    padding: 0.25em 0.5em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background: rgba(255, 255, 255, 0.48);
    height: 2.2em;
    padding-top:0;
}
input[name=changecolor] {
 display:none;
}
label[for^="changeColor"] {
    cursor: pointer;
    padding: 0.3em;
    background-color: rgba(255, 255, 255, 0.29);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    margin-left: 0.1em;
    margin-right: 0.1em;
}
label[for^="changeColor"]:after {
    content:" ";
    display:block;
    width:1em;
    height:1em;
    border-radius:50%;
    background-color:black;
}
    label[for^="changeColor"]:hover {
        background-color:white;
        transition:background-color 0.2s ease-in-out;
    }
label[for^="changeColor-1"]:after {
    background-image: radial-gradient(#899dbf,#00173e);
}
label[for^="changeColor-2"]:after {
    background-image: radial-gradient(#db6969,#9f0000);
}
label[for^="changeColor-3"]:after {
    background-image: radial-gradient(#46c34f,#03864f);
}


[id^="changeColor-1"]:checked ~ * nav {
    background-color: rgba(0, 23, 62, 0.9098039215686274);
}
[id^="changeColor-2"]:checked ~ * nav {
    background-color: rgba(55, 0, 0, 0.8784313725490196);
}
[id^="changeColor-3"]:checked ~ * nav {
    background-color:rgba(0, 34, 0, 0.9019607843137255);
}

/*slider��css*/

    #background-slider ul.activeleft {
        left: 0vw;
        transition: left 1s ease-in-out;
    }
    #background-slider ul.activeright {
        left: -200vw;
        transition: left 1s ease-in-out;
    }
            #background-slider li {
                display: block;
                float: left;
                width: 100vw;
                height: 100%;
                list-style-type: none;
                overflow:hidden;
            }
            #background-slider li>div {
                width: 100%;
                height: 100%;
                background-position: center;
                background-size: cover;
                background-color: #a7c5e4;
                animation: backgroundAnimation 25s ease-in-out infinite alternate;
                display:flex;
                flex-direction:column;
                justify-content:right;
                align-items:end;
                
            }
                #background-slider li > div .title, #background-slider li > div .content {
                    font-size: 2em;
                    color: white;
                    opacity: 0.8;
                    margin: 2em;
                }
@keyframes backgroundAnimation{
    0% {transform:scale(1)}
    100% {transform: scale(1.2)}
}

.sliderButton {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    background-color: #ffffff00;
    border-radius: 50%;
    font-family: monospace;
    color: #f1efef;
    transition: background-color,color .3s ease-in-out;
    font-size: 0.5em;
    cursor: pointer;
}
    .sliderButton:hover {
        background-color: #ffffff30;
        color: white;
        text-shadow: 0 0 3px #bd0101;
    }
    .sliderButton#slideLeft, .sliderButton#slideLeft2 {
        left: 5vw;
    }
    .sliderButton#slideRight, .sliderButton#slideRight2 {
        right: 5vw;
    }
    .sliderButton#slideLeft:after, .sliderButton#slideLeft2:after {
        content: "<";
        text-align: center;
        display: block;
        font-size: 50px;
        line-height: 50px;
        margin-left: -5px;
    }

    .sliderButton#slideRight:after, .sliderButton#slideRight2:after {
        content: ">";
        text-align: center;
        display: block;
        font-size: 50px;
        line-height: 50px;
        margin-left: 5px;
    }

    #paddingforslide{
        padding-top:50vh;
        display:flex;
        justify-content:center;
        align-items:end;
        /*border-top:1px dotted white;*/
    }

/*photocatagory*/
.cata-buttons{
    text-align:center;
}
.photocatagory {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.18);
    padding: 0.8em;
    margin: 0.5em;
    display: inline-block;
    border-radius: 0.3em;
    line-height: 1em;
    border: 2px solid transparent;
}
    .photocatagory[for=photos] {
        background-color: rgba(0, 195, 255, 0.31);
        
    }
    .photocatagory[for=food] {
        background-color: rgba(255, 0, 0, 0.34);
    }
    .photocatagory[for=housedecor] {
        background-color: rgba(0, 173, 80, 0.24);
    }
    .photocatagory[for=family] {
        background-color: rgba(220, 162, 0, 0.24);
    }
    .pop-pic {
        transition: all 1s ease;
    }
#family:checked ~ :not(.cata-buttons):not(.catagory0),
#food:checked ~ :not(.cata-buttons):not(.catagory1),
#housedecor:checked ~ :not(.cata-buttons):not(.catagory3),
#photos:checked ~ :not(.cata-buttons):not(.catagory2) {
    width: 0;
    height: 0;
    opacity: 0;
    padding:0;
}
#all:checked ~ .cata-buttons .photocatagory.all,
#family:checked ~ .cata-buttons .photocatagory.family,
#photos:checked ~ .cata-buttons .photocatagory.photos,
#food:checked ~ .cata-buttons .photocatagory.food,
#housedecor:checked ~ .cata-buttons .photocatagory.housedecor {
    border-color: gold;
}
/*pop picture out*/
.poppic-wrapper {
    margin: 2em -0.3em;
    width:calc(100% + 0.6em)
}
input[name=poppic], input[name=cataforpicture] {
    display: none;
}
.pop-pic {
    width: 50%;
    height: 300px;
    float: left;
    position:relative;
    overflow:hidden;
    padding:0.3em;
}
    .pop-pic input ~ label.picture {
        display: block;
        width: 100%;
        height: 100%;
        background-size: cover;
        cursor: pointer;
        background-position: center;
        /*transition: all 1s ease;*/
    }
    .pop-pic.catagory:before, .pop-pic.catagory:after {
        display: block;
        position: absolute;
        content: attr(data-info);
        right: 0.3em;
        bottom: -50%;
        width: calc(80% - 0.3em);
        height: 4em;
        transition: all 0.2s ease;
        color: white;
        padding: 0.5em;
        border-top-left-radius: 1em;
        text-align:center;
    }
    .pop-pic.catagory:after {
        text-align: center;
        content: attr(data-title);
        left: 0.3em;
        bottom: -50%;
        width: calc(20% - 0.3em);
        height: 3em;
        box-shadow: inset -11px 0px 19px -6px rgba(0, 0, 0, 0.51);
        transition: all 0.5s ease;
    }
    /*美食*/
    .pop-pic.catagory1:before {

        background-color: rgba(251, 182, 182, 0.80);
    }
    .pop-pic.catagory1:after {
        background-color: rgba(255, 0, 0, 0.80);
        
    }
    /*摄影*/
    .pop-pic.catagory2:before {
        background-color: rgba(182, 251, 243, 0.80);
    }

    .pop-pic.catagory2:after {
        background-color: rgba(0, 195, 255, 0.80);
    }

    /*家装*/
    .pop-pic.catagory3:before {
        background-color: rgba(140, 254, 176, 0.80);
    }

    .pop-pic.catagory3:after {
        background-color: rgba(0, 122, 37, 0.80);
    }
    /*家庭*/
    .pop-pic.catagory0:before {
        background-color: rgba(188, 214, 0, 0.80);
    }

    .pop-pic.catagory0:after {
        background-color: rgba(235, 138, 0, 0.80);
    }



    .pop-pic:hover:after,.pop-pic:hover:before {
        bottom: 0.3em;
    }

.pop-pic input:checked ~ label {
    display: block;
    position: fixed;
    top: 5vh;
    left: 5vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: calc(90vh - 1em);
    width: 90vw;
    z-index: 100;
    transition: height 1s ease;
}

        .pop-pic input:checked ~ .background {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            z-index: 99;
            background-color: black;
            color: white;
            opacity: 0.8;
            cursor: pointer;
            
        }
            .pop-pic input:checked ~ .background:after {
                content: "×";
                display: block;
                margin: 0 auto;
                position: absolute;
                bottom: 20px;
                left: calc(50% - 0.5em);
                font-size: 3em;
            }

.description {
    text-align: center;
    padding-bottom: 2em;
    color: grey;
    text-shadow: 0px 1px 4px grey;
}