/* ==================================================
   一片白 一点红 网站统一样式
   ================================================== */


:root {

    --text: #222;

    --muted: #777;

    --line: #e5e5e5;

    --background: #ffffff;

    --soft: #f7f7f7;

    --link: #333;

}



/* ------------------------------
   基础
   ------------------------------ */


* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

}


body {

    font-family:
        "Microsoft YaHei",
        "Noto Sans SC",
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.8;

}



a {

    color: var(--link);

    text-decoration: none;

}


a:hover {

    color: #000;

}





/* ==================================================
   顶部
   ================================================== */


.site-header {

    background: #fff;

    border-bottom:
        1px solid var(--line);

}



.header-inner {

    max-width: 1100px;

    margin: 0 auto;

    padding:
        25px 20px;

}



.site-name {

    margin: 0;

    font-size: 30px;

    font-weight: 700;

}



.site-name a {

    color: #111;

}



.site-subtitle {

    margin-top: 6px;

    color: var(--muted);

    font-size: 15px;

}





/* ==================================================
   导航
   ================================================== */


.main-nav {

    background: #fafafa;

    border-bottom:
        1px solid var(--line);

}



.nav-inner {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    flex-wrap: wrap;

}



.nav-item {

    padding:
        12px 16px;

    color: #444;

    font-size: 15px;

}



.nav-item:hover {

    background: #eee;

    color: #000;

}



.nav-item.home-active,
.nav-item.home {

    background: #eee;

    font-weight: bold;

}





/* ==================================================
   通用容器
   ================================================== */


.container {

    width:
        min(980px, calc(100% - 36px));

    margin: 0 auto;

}





/* ==================================================
   文章页
   ================================================== */


.article-container {

    width:
        min(900px, calc(100% - 36px));

    margin: 35px auto;

}



.article-page-title {

    font-size: 32px;

    line-height: 1.5;

    margin-bottom: 15px;

}



.article-page-meta,
.article-meta {

    color: var(--muted);

    font-size: 14px;

    border-bottom:
        1px solid var(--line);

    padding-bottom: 15px;

}



.article-content {

    margin-top: 30px;

    font-size: 17px;

}



.article-content p {

    margin-bottom: 20px;

}



.article-content h2 {

    margin-top: 35px;

    border-left:
        4px solid #999;

    padding-left: 12px;

}



.article-content h3 {

    margin-top: 25px;

}



.article-content img {

    max-width: 100%;

    display: block;

    margin:
        20px auto;

}





/* ==================================================
   栏目列表
   ================================================== */


.section-page {

    margin-top: 35px;

    border:
        1px solid var(--line);

}



.section-header {

    padding:
        25px;

    background: #fafafa;

}



.section-header h1 {

    margin: 0;

    font-size: 24px;


    color: #EE1C25;
    font-weight: 600;

}



.section-header p {

    color: var(--muted);

}



.article {

    padding:
        18px 25px;

    border-bottom:
        1px solid var(--line);

}



.article-title {

    margin: 0;

    font-size: 18px;

}



.article-title a:hover {

    text-decoration: underline;

}



.empty {

    padding: 40px;

    text-align: center;

    color: var(--muted);

}





/* ==================================================
   返回按钮
   ================================================== */


.back,
.back-link {

    display: inline-block;

    margin-top: 30px;

    padding:
        8px 16px;

    border:
        1px solid #ccc;

    color: #444;

}



.back:hover,
.back-link:hover {

    background: #f5f5f5;

}





/* ==================================================
   页脚
   ================================================== */


.site-footer,
.footer {

    margin-top: 50px;

    padding:
        25px;

    text-align: center;

    color: #888;

    border-top:
        1px solid var(--line);

    font-size: 14px;

}





/* ==================================================
   手机
   ================================================== */


@media(max-width:720px){


    .site-name {

        font-size: 24px;

    }


    .nav-item {

        font-size: 13px;

        padding:
            10px;

    }


    .container,
    .article-container {

        width:
            calc(100% - 20px);

    }


    .article-page-title {

        font-size: 24px;

    }


    .article-content {

        font-size: 16px;

    }


}
/* 网站标题中的红字 */

.red-text {

    color: #EE1C25;

}
/* 网站标题 */

.site-title {

    font-size: 30px;

    font-weight: 700;

}


/* 网站标题中的红字 */

.red-text {

    color: #EE1C25;

    font-weight: 700;

}