body {
    background-color: cadetblue;
}

.main-container {
    display: flex;
    flex: 3;
    flex-direction: column;
    margin: 0% 10%;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(97, 95, 95, 0.1);
    background-color: white;
}

.article-card {
    /* margin: 5px 10% 5px 5px; */
    margin: 5px 5px 5px 5px;
    /* 内边距 */
    padding: 5px;
    /* 让边框变成圆角 */
    border-radius: 8px;
    /* 添加阴影效果 */
    /* box-shadow: 水平阴影的位置 垂直阴影的位 设置阴影的模糊距离 阴影的扩展距离 阴影的颜色 内阴影标记; */
    box-shadow: 0 4px 8px rgba(14, 13, 13, 0.1);
    /* 添加动画效果 */
    /* transition: 过渡效果 过渡持续时间 过渡时间函数 过渡延迟时间; */
    transition: transform 0.3s ease;
}

.article-card h3 {
    text-align: center;
}

.article-card h3 a {
    text-decoration: none;
}

/* 父容器样式：清除浮动影响 */
.span-container {
    width: 80%;
    margin: 0 10%;
    padding: 10px;
    overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
}

/* 左侧 span 左浮动 */
.span-left {
    float: left;
    color: #333;
}

/* 右侧 span 右浮动 */
.span-right {
    float: right;
    color: #333;
}

.article-card p {
    text-indent: 32px;
}

a:link {
    color: rgb(17, 0, 255);
}

/* a:hover {
    color: rgb(17, 0, 255);
}

a:active {
    color: rgb(17, 0, 255);
} */

a:visited {
    color: rgb(17, 0, 255);
}