/* style.css (深色模式 + 200% 缩放版本) */

html {
    font-size: 200%; /* 全局放大！ */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    /* padding: 20px -> 20/16 = 1.25rem */
    padding: 1.25rem;
    
    background-color: #121212; 
    color: #e0e0e0;
}

main {
    background-color: #1e1e1e; 
    /* padding: 20px -> 1.25rem */
    padding: 1.25rem;
    
    /* border: 1px ... -> 1/16 = 0.0625rem */
    border: 0.0625rem solid #333; 
    /* border-radius: 5px -> 5/16 = 0.3125rem */
    border-radius: 0.3125rem; 
    /* margin-bottom: 30px -> 30/16 = 1.875rem */
    margin-bottom: 1.875rem; 
    text-align: center;
}

main h1 {
    color: #ffffff; 
    margin-top: 0;
    /* margin-bottom: 15px -> 15/16 = 0.9375rem */
    margin-bottom: 0.9375rem; 
}

main p {
    line-height: 1.6;
    /* margin-bottom: 10px -> 10/16 = 0.625rem */
    margin-bottom: 0.625rem; 
}

main img {
    /* 1. 设置一个用 rem 定义的基础宽度 */
    width: 37.5rem; /* 相当于在100%缩放时为 300px */

    /* 2. 保留 max-width 作为响应式设计的安全保障 */
    /* 这能确保在窄屏幕上，图片不会超出容器 */
    max-width: 100%;
    
    height: auto;
    display: block;
    margin: 0.9375rem auto; 
    border-radius: 0.3125rem;

    /* * 关键：添加这些属性来保持像素画的清晰度 
     */
    image-rendering: -moz-crisp-edges;         /* Firefox 旧版 */
    image-rendering: -webkit-crisp-edges;   /* Webkit (Chrome, Safari) 旧版 */
    image-rendering: pixelated;             /* 现代浏览器标准，实现近邻算法效果 */
}

/* 针对 figure 容器的样式 */
main figure {
    /* 移除 figure 标签默认的外边距 */
    margin: 0; 
    /* 图片和注释作为一个整体，可以设置其上下外边距 */
    margin-top: 0.9375rem; /* 15px / 16 */
    margin-bottom: 0.9375rem;
}

/* 针对 figcaption (注释) 的样式 */
main figcaption {
    /* 设置注释文字距离图片的上边距 */
    margin-top: 0.5rem; /* 8px / 16 */
    
    /* 设置注释的文字样式 */
    font-size: 0.8em;      /* 字体大小可以小一点，em 相对于父元素 */
    font-style: italic;    /* 使用斜体，这是注释的常见样式 */
    color: #888;          /* 使用一个较暗的灰色，表明是次要信息 */
    text-align: center;    /* 确保文字居中对齐 */
}

footer {
    text-align: center;
    /* padding: 10px -> 0.625rem */
    padding: 0.625rem; 
    /* font-size: 0.9em (em单位是相对于父元素，这里可以保留) */
    font-size: 0.9em; 
    color: #888; 
    border-top: 0.0625rem solid #333;
}

footer a {
    color: #58a6ff; 
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}