html, body {
    height: 100%; /* 确保html和body占满整个视口 */
    margin: 0; /* 移除默认的边距 */
    padding: 0;
}

body{
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中显示 */
    background-attachment: fixed; /* 背景图片固定 */
}


@media screen and (min-width: 801px) {
    .container{
        display: flex;
        height: 95vh;
        width: 95vw;
        flex-direction: row;
        
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .phone{
        display: none;
    }
    
    .leftBar{
        display: flex;
        flex-direction: column;
    
        width: 250px;
    }
    
    .userInformation{
        flex-grow: 1;
    
        display: flex;
        align-content: center;
        flex-direction: column;
        
        position: relative;
    
        padding-top: 10px;
    
        background-color: hsla(0, 0%, 0%, 0.826);
    }
    
    .username{
        width: 100%;
        height: 175px;
    
        display: flex;
        align-content: center;
        justify-content: center;
    }
    
    .userid{
        width: 100%;
        height: 10px;
    
        display: flex;
        align-content: center;
        justify-content: center;
    
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 25px;
        color: white;
    }
    
    .userTarget{
        flex-grow: 1;
        display: flex;
    
        padding-top:50px;
        flex-direction: column;
    }
    
    .jumpBar{
        height: 30px;
        display: flex;
        background-color: hsla(0, 0%, 0%, 0.826);
    }
    
    .rightBar{
        display: flex;
        flex-direction: column;
        width: calc(100% - 250px);
        min-height: 435px;
        justify-content: flex-start;
    }
    
    .content{
        flex-grow: 1;
    
        overflow-y: scroll;
        scrollbar-width: thin;
    
        background-color: hsla(0, 0%, 100%, 0.516);
        
        padding-left: 1vw;
        padding-right: 1vw;
    }
    
    .settings{
        display: none;
    }
    
    .circle{
        display: inline-block;
    
        width:150px;
        height: 150px;
    
        background-color: aliceblue;
        border-radius: 50%;

        overflow: hidden;
        position: relative;
    }

    .avatar{
        width: 150px;
        height: auto;
        object-fit: cover;
        position: absolute;

        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    
    .jumpBarItem{
        height: 30px;
        width: 30px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .jumpBarItem:hover{
        background-color: black;
    }
    
    .jumpBarItem img{
        height: 100%;
        width: 100%;
    }
    
    .scroll-trigger{
        width: 100%;
        height: 32px;
    
        color: aliceblue;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 18px;
    
        text-align: center;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    
        border-top:1px solid aliceblue;
        border-bottom: 1px solid aliceblue;
        border-right: 1px solid transparent;
        border-left:1px solid transparent;
        box-sizing: border-box; 
    
        z-index: 1;
    }
    
    .sectionContent{
        display: flex;
        flex-direction: column;
    }
       
    .sectionTitle{
        display: flex;
        flex-direction: row;
    
        color: aliceblue;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 20px;
    }
    
    .sectionTitle img{
        width: 26px;
        height:26px;
    }
    
    .sectionMainContent{
        font-size: 20px;
        color:black;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  
    }
    
    .sectionMainContent p{
        margin: 0;
    }
    
    .sectionMainContent img{
        height: auto;
    }
}

@media screen and (max-width: 800px) {
    .container{
        display: flex;
        width: 95vw;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .settings{
        display: none;
    }

    .phone{
        display: flex;
        width: 100%;
        height: 32px;

        background-color: black;

        flex-direction: row;
    }

    .phone img{
        position: relative;
        width: 32px;
        left: calc(95vw - 32px);
    }

    .leftBar{
        display:flex;
        position: relative;
        flex-direction: row;
        
        width:100%;
        height: 400px;
    }

    .jumpBar{
        width: 32px;
        height: 100%;

        background-color: black;
    }

    .userInformation{
        flex-grow: 1;

        display: flex;
        align-content: center;
        flex-direction: column;

        position: relative;

        padding: 1;

        background-color: black;
    }
    
    .username{
        width: 50%;
        height: 175px;

        display: flex;
        align-content: center;
        justify-content: center;
    }

    .circle{
        display: inline;
        width: 150px;
        height: 150px;

        background-color: aliceblue;
        border-radius: 50%;
    }

    .userTarget{
        width: 50%;
        height: 400px;

        position:absolute;
        left: 50%;
        top : -50%;

        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;

    }

    .userid{
        width: 50%;
        height: 10px;

        display: flex;
        align-content: center;
        justify-content: center;

        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 25px;
        color: white;
    }

    .jumpBarItem{
        height: 30px;
        width: 30px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .jumpBarItem img{
        height: 100%;
        width: 100%;
    }

    
    
    

    .scroll-trigger{
        width: 100%;
        height: 32px;

        color: aliceblue;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 18px;

        text-align: center;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;

        border-top: 1px solid aliceblue;
        border-bottom: 1px solid aliceblue;
        border-right: 1px solid transparent;
        border-left: 1px solid transparent;
        box-sizing: border-box;

        z-index: 1;
    }

    .rightBar{
        margin-top: 0;

        width: 100%;
        height: calc(100vh - 32px);

        display: flex;
        flex-direction: column;
    }

    .content{
        flex-grow: 1;
        overflow-y: scroll;
        scrollbar-width: thin;

        background-color: hsla(0,0%,100%,0.516);
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .sectionTitle{
        display: flex;
        flex-direction: row;

        font-size:20px;

        color:black;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

    .sectionTitle img{
        width: 26px;
        height:26px;
    }

    .sectionMainContent{
        font-size: 12px;
        color:black;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

    .sectionMainContent p{
        margin: 0;
    }

    .sectionMainContent img{
        height: auto;
    }
    
    .sectionConten{
        display: flex;
        flex-direction: column;
    }
}