/* 全局body样式 */
body {
    margin: 0; /* 移除默认外边距 */
    box-sizing: border-box; /* 盒模型设置为border-box，方便计算宽度 */
    width: 100%; /* 宽度占满整个屏幕 */
    height: 100%; /* 高度占满整个屏幕 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
}

/* 预格式化文本样式 */
body pre {
    font-family: Microsoft YaHei; /* 设置字体为微软雅黑 */
    font-size: 1rem; /* 字体大小为1rem */
    width: 960px; /* 固定宽度960px */
    text-align: right; /* 文本右对齐 */
    padding-right: 20px; /* 右侧内边距20px */
    margin-top: 0px; /* 移除顶部外边距 */
}

/* 链接样式 */
a {
    text-decoration: none; /* 移除下划线 */
    border: 1px solid #ccc; /* 1px灰色边框 */
    border-radius: 5px; /* 5px圆角 */
    padding: 5px 10px; /* 内边距上下5px，左右10px */
    font-size: 2rem; /* 字体大小为1rem */

    display: flex; /* 使用flex布局 */
    position: relative; /* 相对定位 */
    top: 26px; /* 向上偏移26px */
    left: 10px; /* 向左偏移10px */
}

/* 链接悬停样式 */
a:hover {
    border-color: #000; /* 悬停时边框变为黑色 */
}

/* 段落样式 */
body p {
    margin-top: auto; /* 顶部外边距自动，将元素推到底部 */
    margin-bottom: 10px; /* 底部外边距10px */
}

/* 针对移动设备的响应式样式 */
@media (max-width: 980px) {
    /* 移动端预格式化文本样式 */
    body pre {
        font-size: 1.8rem; /* 增大字体 */
        width: 95%; /* 适配屏幕宽度 */
        padding-right: 10px; /* 调整右侧内边距 */
    }

    /* 移动端链接样式 */
    a {
        padding: 10px 20px; /* 增大按钮尺寸 */
        font-size: 2.2rem; /* 增大按钮文字 */
        top: 40px; /* 调整垂直位置 */
        left: 0; /* 重置水平位置 */
        border-width: 2px; /* 加粗边框 */
    }
    
    /* 移动端段落样式 */
    body p {
        font-size: 1.2rem; /* 增大底部文字 */
        margin-bottom: 20px; /* 增加底部外边距 */
    }
}