@font-face {
font-family: "MyCustomFont";
src: url("../font/LoliFont.ttc");
}

body
        {
            font-family: "MyCustomFont", sans-serif;
            height: 100%;
            margin: 0;
            /*background-color: rgba(25,0,25,0.1);  你想要的颜色 */
            min-height: 100vh;
            background: linear-gradient(
                180deg,
                rgba(255, 155, 198, 0.15),
                rgba(255, 155, 198, 0.30),
                rgba(255, 155, 198, 0.45)
            );

        }
        hr{
            border:0;
            height: 3px;
            background-color: rgba(30,30,25,0.4);
        }
        h1{
            margin:0px;
            background: pink;
            background-color: rgba(50, 0, 0, 0.1);
        }
        .theTitle{
            height: 100px;
            font-weight: ;
            color:deeppink;
        }

        .theInf{
            display: flex;
            font-size: 20px;
            color: #ff578b;
        }
        .theInf img {
            border-radius: 15px;
            transition: all 0.3s;       /* 监控所有属性的变化 */
        }

        .theInf img:hover {
            transform: translateY(-5px); /* 向上移动 5像素 */
            box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 增加阴影，显得浮起来了 */
        }

        .InfTitle{
            font-size: 40px;
            color: deeppink;
        }

        .theMusic{
          width: 100%;
          display: flex;
          flex-direction: column;
          font-size: 35px;
          color: #005621;

          /* 关键：背景上下透明，中间 10% */
          background: linear-gradient(
            to bottom,
            rgba(255, 105, 180, 0) 0%,
            rgba(255, 105, 180, 0.10) 50%,
            rgba(255, 105, 180, 0) 100%
        );
          align-items: center;
          justify-content: flex-start;
      }

        /* 容器：负责把播放器挤下去，不让它撞到文字 */
        .musicText {
            display: flex;
            flex-direction: column;
            align-items: center; /* 靠左对齐，如果想居中改成 center */
            margin-bottom: 30px;     /* ★这里解决了和播放器撞上的问题 */
        }

        /* 公共字体属性：保持你的原设 */
        .txt-up, .txt-down {
            font-size: 50px;
            font-weight: 200;
            font-style: normal;
            line-height: 1.2; /* 恢复正常行高，防止文字被切掉 */
            width: 100%;
        }

        /* 上面的文字：下半部分透明 */
        .txt-up {
            /* 遮罩：黑色是显示，透明是不显示。从上往下：显示 -> 透明 */
            -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
            
            position: relative;
            z-index: 1; /* 保证层级 */
        }

        /* 下面的文字：上半部分透明 */
        .txt-down {
            /* ★核心：用负边距强行制造重叠，还原你想要的效果，但不会切断文字 */
            margin-top: -35px; 
            
            /* 遮罩：从上往下：透明 -> 显示 */
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
            
            position: relative;
            z-index: 2;
        }

        .Library{
            text-align:center;
        }
        #ND {
            width: 400px;    /* 设置你想要的图片宽度 */   
            border-radius: 15px; /* 设置圆角，让光圈更柔和 */
            
            /* 
               关键代码：绿色渐变透明环绕效果 
               原理：叠加多层阴影 (box-shadow)
               参数格式：水平偏移 垂直偏移 模糊半径 扩展半径 颜色
            */
            box-shadow: 
                0 0 10px  2px rgba(0, 255, 127, 0.8), /* 第一层：靠近图片的亮绿色 */
                0 0 30px 10px rgba(0, 255, 127, 0.5), /* 第二层：中间的半透明绿 */
                0 0 60px 20px rgba(0, 255, 127, 0.2); /* 第三层：最外圈的淡淡光晕 */
            
            /* 加个过渡动画，让显示时更自然 */
            transition: all 0.5s ease;
        }