@font-face {
    font-family: "smiley-sans";  /* 自定义字体名（随便取，后续要用） */
    src: 
        /* 优先加载woff2（体积小、加载快），路径指向fonts文件夹下的文件 */
        url("./files/smiley-sans-v2.0.1/SmileySans-Oblique.ttf.woff2") format("woff2"),
        /* 兼容旧浏览器（如IE），备用ttf格式 */
        url("./files/smiley-sans-v2.0.1/SmileySans-Oblique.ttf") format("truetype");
    font-weight: normal;  /* 字重：常规（对应Regular字体文件） */
    font-style: normal;   /* 字体样式：常规（非斜体） */
    font-display: swap;   /* 优化：先显示系统字体，避免加载时文字消失 */
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
    font-family:"smiley-sans";
    background-color: aliceblue;
    font-size: 16px;

}

#video-bg {
    position: fixed; /* 固定在视口，滚动页面不移动 */   
    top: 0;
    left: 0;
    width: 100vw; /* 视口宽度100% */
    height: 100vh; /* 视口高度100% */
    object-fit: cover; /* 保持视频比例，铺满容器（不会拉伸变形） */
    z-index: -1; /* 层级低于页面内容 */
}

/* 页面内容样式（示例），确保在视频上方显示 */


.content {
    position: relative;
    z-index: 1; /* 高于视频层级 */
    color: white; /* 文字白色，对比视频更清晰 */
    text-align: center;
    top: 60px;
    transform: translateY(-50%);
    font-size: 24px;
    padding: 0 20px;
}

.mbody{
    display: flex;
    justify-content: center;
    align-items: center;
}

.card{
    width: 90vw;
    height: 512px;
    max-width: 1280px;

    background-color: rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(3px);
    border-radius: 40px;
    padding: 30px;
    transition: background 0.3s ease,transform 0.3s ease,backdrop-filter 0.3s ease;
}
    .card:hover{
        background-color: rgba(0, 0, 0, 0.3);
        transform: translateY(-5px);
        backdrop-filter: blur(10px);
        .avatar {
            opacity:1;
        }
        .txthead{
            opacity:1;
        }
        
    }
.top{
    width: 100%;
    height: 80px;
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
    .top:hover{
        background-color: rgba(0, 0, 0, 0.5);
    }

.Ttop{
    position: absolute;
    top: 20px;
    left: 20px;
    color: #d8d7d7;
    transition: transform 0.3s ease;

}
    .Ttop:hover{
        transform: scale(1.1) translateX(5px);
    }

.txthead{
    color: #d8d7d7;
    position: absolute;
    top: 30px;
    left: 40px;
    opacity:0.5;
    transition: opacity 0.3s ease;
}

.bottom{
    position: fixed; /* 固定定位，脱离文档流 */
    bottom: 0; /* 距离视口底部0px（核心） */
    left: 0; /* 距离视口左侧0px，撑满宽度 */
    width: 100%;
    height: 50px;
    /* backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.1); */
    transition: background 0.3s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}
    /* .bottom:hover{
        background-color: rgba(0, 0, 0, 0.5);
    } */

.Tbottom{
    color: #d8d7d7;
    transition: transform 0.3s ease;


    }
    .Tbottom:hover{
        transform: scale(1.1) translateX(5px);
    }

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: block;
    border: 0px solid #1d1919;
    object-fit: cover;
    position: absolute;
    top: 170px;
    left: 110px;
    scale: 2;
    opacity:0.5;
    transition: opacity 0.3s ease;
}

.UTTT {
    padding: 20px;
    display: flex;
    gap: 3vw;    /* 三个小盒子之间的空隙 */
    justify-content: space-between;
    padding-top: 180px;
    padding-right: 50px;
    padding-left: 50px;

}

.ttt {
    width: 30vw;
    color: #d8d7d7;
}



a {
/* 去掉下划线 */
text-decoration: none;
/* 默认文字颜色 */
color: #d8d7d7;
transition: all 0.3s ease;
}

    /* 鼠标碰上去变色 */
    a:hover {
    color: #ff183e;
    /* 悬浮也不要下划线 */
    text-decoration: none;
    }