#about-container
    // 竖着，垂直方向居中
    display: flex
    flex-direction: column

    .card
        @extend .cardHover
        background-color: var(--liushen-card-bg)
        border-radius: 12px
        overflow: hidden
        position: relative
        border: var(--liushen-card-border)
    
    .section-title
        // 宋体
        font-family: 'SimSun', 'Microsoft YaHei', sans-serif
        font-size: 60px
        font-weight: 1000
        color: #00000000
        -webkit-text-stroke: 1px var(--liushen-secondtext)
        position: absolute
    
    .flex-1
        flex 1
    
    .top-section
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        border-bottom: 1px solid #888888b0
        width: 100%
        padding-bottom: 20px
        margin-bottom: 20px
        
        .top-content
            display: flex
            align-items: center
            margin-bottom: 20px

            .float-texts
                font-size: 14px
                font-weight: bold
                +maxWidth600()
                    display: none
                
                .float-text
                    margin-top: 10px
                    background-color: var(--liushen-card-secondbg)
                    border-radius: 20px
                    padding: 1px 20px
                    border: var(--liushen-card-border)
                    width: fit-content
                    // 上下不停轻微浮动
                    @keyframes floatUpDown
                        0%
                            transform: translateY(0px)
                        50%
                            transform: translateY(-4px)
                        100%
                            transform: translateY(0px)
                    animation: floatUpDown 4s ease-in-out infinite
                    
                    &.float-text-1,
                    &.float-text-4,
                    &.float-text-6,
                    &.float-text-7
                        // 向左边偏移
                        margin-left: 20px
                    
                    &.float-text-1,
                    &.float-text-5
                        animation-delay: 0.5s
                    &.float-text-2,
                    &.float-text-6
                        animation-delay: 1.0s
                    &.float-text-3,
                    &.float-text-7
                        animation-delay: 1.5s
                    &.float-text-4,
                    &.float-text-8
                        animation-delay: 2.0s

            .avatar-container
                background-color: var(--liushen-card-bg)
                width: 180px
                height: 180px
                border-radius: 50%
                padding: 15px
                margin: 0 10px

                .avatar
                    width: 100%
                    height: 100%
                    border-radius: 50%

        .site-name
            font-size: 20px
            font-weight: bold
        
        .motto
            font-size: 14px
            font-weight: bold
    
    .info-section
        display: flex
        width: 100%
        margin-bottom: 20px

        .left-column
            width: 30%
            display: flex
            flex-direction: column
            padding: 0
            +maxWidth768()
                display: none

            .personal-info
                padding: 20px 20px 0 20px
                .section-title
                    top: 0
                    right: -15px
                    // 文本竖向显示
                    writing-mode: vertical-rl
                    text-orientation: upright
                
                .info-grid
                    p
                        margin-top: 0
                        margin-bottom: 10px
            
            img.left-column-bottom
                width: 100%
                margin-top: 20px
                transition: transform 0.3s ease-in-out

                &:hover
                    transform: scale(1.2)

        .right-column
            width: 70%
            margin-left: 20px
            display: flex
            flex-direction: column
            +maxWidth768()
                width: 100%
                margin-left: 0
            .personality
                height: 220px
                display: flex
                flex-direction: row
                align-items: center
                margin-bottom: 20px
                .personality-info
                    flex: 1
                    display: flex
                    flex-direction: column
                    padding: 20px
                    height: 100%
                    p
                        margin: 0
                    .type
                        font-size: 23px
                        font-weight: bold
                    .type_name
                        font-size: 30px
                        font-weight: bold
                .personality-svg
                    width: 200px
                    height: 200px
                    transition: transform 0.3s ease-in-out
                    &:hover
                        transform: rotate(20deg)

            .description-and-social
                display: flex
                flex: 1
                flex-direction: column
                .description
                    padding: 20px
                .social-links
                    display: flex
                    flex-direction: row
                    justify-content: flex-start
                    margin-left: 20px
                    a
                        display: flex
                        align-items: center
                        border-radius: 12px
                        height: 80px
                        width: 80px
                        img
                            width: 65px
                            border-radius: 12px
                            height: 65px
    .skills-and-projects
        display: flex
        flex-direction: row
        margin-bottom: 20px
        .learning
            margin-left: 20px
        .skills
            width: 60%
            margin-right: 20px
            +maxWidth600()
                width: 100%
                margin-right: 0
            .section-title
                top: -35px
                left: 15px
            .skills-grid
                margin-top: 90px
                // 竖直方向居中
                display: flex
                flex-direction: column
                // align-items: center
                justify-content: center
                .skill-category
                    display: flex
                    flex-direction: row
                    padding-left: 20px
                    // 不换行，超出部分直接省略
                    overflow: hidden
                    text-overflow: ellipsis
                    white-space: nowrap

                    &.category-2
                        // 从右往左，反过来，右边超出部分省略
                        flex-direction: row-reverse
                        margin-top: 20px
                        padding-right: 20px

                    .skill-card
                        width: 80px
                        height: 80px
                        padding: 10px
                        background-color: #87878780
                        margin-right: 10px
                        border-radius: 12px
                        img
                            width: 60px
                            height: 60px
                            object-fit: cover
                            object-position: center
                            border-radius: 10px

        .projects
            width: 40%
            padding: 20px 20px 0 20px
            +maxWidth600()
                display: none
            .section-title
                top: -35px
                left: 15px
            .projects-grid
                margin-top: 70px
                .project
                    background-color: var(--liushen-card-secondbg)
                    border-radius: 12px
                    padding: 10px
                    margin-bottom: 20px
                    h3,p
                        margin: 0

    .hobbies-and-evaluation
        display: flex
        flex-direction: row
        .hobbies
            width: 40%
            margin-right: 20px
            +maxWidth600()
                display: none
            .section-title
                right: 15px
                bottom: -35px
        .self-evaluation
            width: 60%
            padding: 20px
            +maxWidth600()
                width: 100%
            .section-title
                right: 15px
                bottom: -35px
            p
                margin-top: 0