@font-face {
            font-family: 'MyFont';
            src: url('./SmileySans-Oblique.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        body{
            margin: 0;
            background-image: url(./photo/p1.webp);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            font-family: 'MyFont',serif;
        }


        /* 音乐和控制 */
        .bgm{
            display: none;
        }
        #muteBtn{
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 2;

            width: 50px;
            height: 50px;
            border-radius: 15px;

            cursor: pointer;

            border: 1px solid rgba(255,255,255,0.3);

            background: rgba(255,255,255,0.15);

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            box-shadow:
                0 4px 12px rgba(0,0,0,0.2),
                inset 0 1px 2px rgba(255,255,255,0.4);

            transition: all 0.25s ease;
        }
        #muteBtn:hover{
            background: rgba(255,255,255,0.25);
            transform: scale(1.08);
        }
        .bgm_img{
            width: 27px;
        }


        /* 毛玻璃层 */
        .card{
            position: fixed;
            inset: 0;

            background: rgba(104, 103, 103, 0.15);

            backdrop-filter: blur(0px) brightness(1) saturate(1);
            transition: backdrop-filter 1s ease;

            pointer-events: none;
            z-index:1;
        }

        /* 这行的作用其实是模糊后的效果，当达到触发条件时，JS将为元素加入blur的类进行模糊 */
        .card.blur{
            backdrop-filter: blur(60px) brightness(1.2) saturate(1.3);
        }

        /* 开头句子 */

    /* 修改原有的 #introText，添加过渡效果 */
    #introText {
        position: relative;
        top: 80vh;
        font-size: 50px;
        font-weight: 900;
        color: #e2e0e0;
        text-align: center;
        
        clip-path: inset(0 100% 0 0);
        animation: reveal 4s ease forwards;

        /* 新增：平滑消失的过渡 */
        transition: opacity 0.8s ease, transform 0.8s ease;
        opacity: 1;
    }

/* 当 container 出现时，给 introText 加上这个类 */
        #introText.hidden {
            opacity: 0;
            transform: translateY(-20px); /* 向上飘走一小段，效果更生动 */
            pointer-events: none; /* 消失后防止阻挡鼠标事件 */
        }

        @keyframes reveal {
            from {
                clip-path: inset(0 100% 0 0);
            }
            to {
                clip-path: inset(0 0 0 0); /* 结束状态：完全展开 */
            }
        }



        /* 版心 */
        .container{
            position: relative;
            z-index: 2;

            width:1200px;
            background:rgba(20, 20, 20, 0.6);

            margin:120vh auto 0 auto;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }


        /* 头像，名字 */
        .user1{
            float: left;
            
        }
        .avatar{
            width: 270px;
            border-radius : 10px;
            margin-top: -80px;

        }
        #uername{
            width: 270px;
            text-align: center;
            font-size: 30px;
            color: rgb(255, 255, 255);
        }


        /* 联系方式栏 */
        .user2{
            width: 900px;
            height: 209px;
            background-image: url(./photo/p3.1.png);
            background-size: cover;
            float: right;

            
        }
        .social{
            font-size: 25px;
            float: left;
            margin-top: 140px;
            margin-left: 10px;
        }
        /* 社媒图标 */
        .social-icons{
            width: 50px;
            height: 50px;
            background-color: #F9F6C4;
            border-radius: 7px;
            float: left;
            margin-top: 130px;
            margin-left: 20px;
            position: relative;

        }
        .social-icons1{
            width: 50px;
            position: absolute;
            bottom: 0;
        }



        /* 自我介绍 */
        .user3{
            width: 1200px;
            height: 300px;
            float: left;

            color: #ffffff;
            font-size: 20px;
            text-align: center;
        }

        /* 动态 */
        .user4{
            width: 1198px;
            height: 500px;
            float: left;
        }
        .updates_name{
            font-size: 80px;
            color: #ffffff;
            margin-top: 40px;
            margin-left: 40px;
            float: left;
        }
        .updates_box{
            height: 400px;
            width: 800px;
            background-color: rgba(255,255,255,0.4);
            border-radius: 20px;
            float: right;
            margin-top: 80px;
            margin-right: 150px;
        }
        .updates_content{
            font-size: 23px;
            margin-left: 60px;
        }
        dt {
            float: left;
            width: 100px;
        }
        dd {
            margin-left: 100px;
        }




        .divider {
        height: 4px;
        float: left;
        margin: 0 120px;
        margin-top: 70px;
        margin-bottom: 30px;
        width: 960px;
        background: transparent;
        box-shadow:
            inset 0 1px 1px rgba(0,0,0,0.6),
            inset 0 -1px 1px rgba(255,255,255,0.15);
        }

        .container2,.container3{
            width: 1200px;
            height: 500px;
            position: relative;
            z-index: 2;
            margin: 0 auto;
            margin-top: 10px;
            background:rgba(20, 20, 20, 0.6);
        }
        .container3{
            height: 1000px;
        }

        .updates_box2{
            width: 700px;
            height: 400px;
            background-color: rgba(255,255,255,0.4);;
            border-radius: 20px;
            float: right;
            margin-top: 50px;
            margin-right: 100px;
        }
        .updates_box3{
            width: 1000px;
            height: 864px;
            background-color: rgba(255,255,255,0.4);
            float: right;
        }
.updates_content2 {
    white-space: pre-wrap;
    overflow: auto;
    height: 100%;   /* 或者具体像素高度，如 800px */
    padding: 20px;  /* 内边距 */
    box-sizing: border-box;
}











.fade-in {
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
a{
    color: #000000;
}