/* 针对整个网页主体 (body) 的设置 */
body {
    background-color: #f8f9fa; /* 将网页大背景设置为非常浅的灰色，保护眼睛 */
    
    /* 引入图片，注意路径是从当前 css 文件出发去寻找 images 文件夹 */
    background-image: url('images/2.jpg'); 
    background-size: cover;       /* 让图片按比例缩放，完全覆盖整个屏幕 */
    background-position: center;  /* 无论屏幕怎么拉伸，图片永远居中 */
    background-attachment: fixed; /* 魔法属性：当你往下滚动看文章时，背景图定住不动，非常有空间感！ */
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置一套现代的无衬线字体 */
    max-width: 800px; /* 限制网页的最大宽度为 800 像素，防止在宽屏显示器上文字太长难以阅读 */
    margin: 0 auto; /* 上下边距为0，左右边距自动 (auto)，这会让整个 800px 的网页在屏幕中居中 */
    padding: 20px; /* 给网页内部留出 20px 的呼吸空间 */
}

/* 针对我们用 <article> 标签包裹的每一篇文章的设置 */
article {
    /* 删除原来的 background: white; */
    
    /* rgba 的前三个数字是白色(255,255,255)，最后的 0.85 是透明度（1是不透明，0是全透明），你可以自己调 */
    background: rgba(255, 255, 255, 0.7); 
    
    /* 如果你想更极致，可以加上真正的毛玻璃模糊滤镜（可选） */
    backdrop-filter: blur(10px); 
    
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 针对文章标题 <h2> 的设置 */
h2 {
    margin-top: 0; /* 去除标题默认的顶部多余空隙 */
    color: #2c3e50; /* 把标题颜色改为深蓝灰色 */
}

/* 针对包含作者和时间的小字 <small> 的设置 */
small {
    color: #888; /* 把这些次要信息的颜色调浅，变成灰色，突出正文 */
}
/* 当鼠标悬停在文章卡片上时，稍微往上浮动并加深阴影 */
article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 针对 Markdown 生成的内容排版 */
.markdown-content p {
    line-height: 1.6; /* 让行距变大一点，阅读更舒服 */
}

/* 针对多行代码块的样式（深色护眼主题） */
.markdown-content pre {
    background-color: #2d2d2d; /* 深灰色背景 */
    color: #f8f8f2; /* 浅色文字 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    overflow-x: auto; /* 如果代码太长，允许横向滚动，不破坏网页结构 */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 内阴影，更有极客感 */
}

/* 针对单行代码的样式 */
.markdown-content code {
    font-family: 'Consolas', 'Monaco', monospace; /* 使用程序员最爱的等宽字体 */
    background-color: #f0f0f0; /* 浅色背景 */
    color: #e06c75; /* 微微的红色 */
    padding: 2px 5px;
    border-radius: 4px;
}

/* 如果 pre 里面包裹了 code（也就是多行代码），取消单行代码的背景色，以 pre 为准 */
.markdown-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}