/* 基本的样式设置 */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
}
/* header backgroud */
header{
    width: 100%;
    height: 100px;
    background: url(../images/header-bg.jpg) no-repeat center center / cover;
    color: rgb(255, 255, 255);
    padding: 1em 0;
    text-align: center;
}
.header-title{
    margin-top: 20px;
    font-size: 2.1em;
    color: #117ac0;
    font-weight: 700;
}
main {
    flex: 1;
    padding: 1em;
    text-align: left;
}
footer {
    width: 100%;
    background-color: #f4f4f4;
    color: #303D5D;
    padding: 0.1em 0;
    text-align: center;
}
.article-title {
    color: #5187de;
    font-size: 1.2em;
    text-decoration: none;
}
.article-title:hover {
    text-decoration: underline;
}
.switch-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}

.text-indent{
    text-indent: 2em;
}

.color-grey{
    color: #7b7a7a;
}

.no-deco a{
    text-decoration: none;
    color: #141414;
}

.no-deco{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-deco span{
    display: inline-block;
    text-align: right;
    color: #A7A7A7;
}

.hover-yellow a:hover{
    color: #FE8500;
    text-decoration: underline;
}

.main-style ul{
    list-style-type: none; /* 移除默认的列表样式 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    display: flex; /* 应用Flexbox布局 */
    flex-wrap: wrap; /* 允许Flex项换行 */
    /* 可选的Flexbox属性 */
    justify-content: space-between; /* 子元素从起始位置开始排列 */
    /* padding: 0 5%; */
}

.main-style ul li{
    background-color: lightblue; /* 背景颜色仅用于展示 */
    padding: 10px; /* 内边距 */
    margin: 5px; /* 外边距 */
    /* 可选的Flex属性（通常不需要为li设置flex属性，除非有特殊需求） */
    /* 例如：flex: 1 1 auto; 会使li项等宽并填充可用空间，但这可能不是你想要的换行效果 */
    box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度内 */
    white-space: normal; /* 确保文本内容在需要时能够换行（这通常是默认的，但明确写出以防万一） */
    word-wrap: break-word; /* 在长单词或URL超出容器时换行 */
}

.text-align-right{
    text-align: right;
}