/******************************************导航栏显示区配置**************************************************/

/* 隐藏顶部的 Logo 和搜索框区域，保留管理菜单栏，即隐藏博客园页面最顶部的那一行导航栏，包括“博客园、会员、周边、新闻...”以及“代码改变世界”这整条横幅，不隐藏管理栏 */
/* 只隐藏顶部的 Logo 和搜索框区域，保留管理菜单栏 */
#header h1,
#header h2,
#blogLogo,
.header-avatar,
#header form {
    display: none !important;
}

/* 隐藏博客园顶层的深色导航条（博客园/会员/周边/新闻） */
#top_nav {
    display: none !important;
}




/* 导航栏的内容显示设置 */
/* 隐藏导航栏博客标题， 即孤情剑客*/
#blogTitle h1 a,
#blogTitle h2 {
    display: none;
}

/* ========== 导航栏容器 - 使用 CSS Grid 精确控制顺序 ========== */
#navigator {
    width: 1350px;          /*导航栏宽度*/
    margin: 0 auto;
    height: auto;          /*导航栏高度*/
    line-height: normal;    /*行高，正常标准*/
    padding: 2px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0 !important;
    row-gap: 0 !important;
}


/* ========== 第一行：Focflux 彩虹标题 ========== */
#navigator::before {
    content: "Focflux";
    display: block;
    grid-row: 1;
    font-size: 34px;    /*字体大小*/
    font-weight: 600;
    line-height: 1.0;   /*行高*/
    margin-bottom: 6px;
    text-align: left;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowFlow 4s linear infinite;
}


/* ========== 第二行：标语 打字机 ========== */
#navigator::after {
    content: "以代码为笔，以时光为墨，在二进制里，书写不被定义的人生";
    display: block;
    grid-row: 2;
    width: 0;  /*字符显示宽度*/
    font-size: 16px;
    color: #4a4a4a;
    letter-spacing: 1px;
    line-height: 1.0;
    margin-bottom: 8px;
    text-align: left;
    font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Long Cang", "Noto Serif SC", "STKaiti", "KaiTi", "楷体", serif;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #383d41;
    animation: typing 5s steps(26, end) forwards, blink 0.8s step-end 5s infinite;
}


/* ========== 第三行：导航菜单 ========== */
#navList {
    grid-row: 3;
    justify-self: end;
    text-align: right;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 3.0;
    font-size: 14px;

}

#navList li {
    display: inline;
    margin: 0;
    padding: 0;
}

#navList li a {
    color: #777 !important;  /*字体颜色*/
}

/* ========== 第四行：统计信息 ========== */
.blogStats {
    grid-row: 4;
    justify-self: end;
    text-align: right;
    font-size: 13px;
    color: #8a8a8a;
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
}

/* ========== 动画 ========== */
@keyframes rainbowFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes typing {
    0%   { width: 0; }
    100% { width: 35%; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50%      { border-color: #383d41; }
}





/****************************************** 首页文本内容显示区配置 ******************************************/
/* 调整主内容区域宽度和居中 */
#main {
    width: 1350px;          /* 宽度 */
    margin: 50px auto 0;    /* 上边距 左右自动 下边距 */
}

/* 去掉树叶背景图，改为 #FBFBFB 背景色 */
body {
    background: #EEF2F7 !important;
    background-image: none !important;
}

#main,
#mainContent,
#home {
    background: #EEF2F7 !important;
    background-image: none !important;
}



/* 日期标题颜色 + 圆角方框 */
.dayTitle {
    text-align: left !important;
    padding: 8px 16px !important;
    margin: 15px 0 0 0 !important;
    line-height: 1.5 !important;
    background: #f0f2f5 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    display: inline-block !important;
    width: 200px !important;           /* 宽度 */
    height: 40px !important;           /* 高度 */
    box-sizing: border-box !important; /* 宽高包含 padding 和 border */
}

.dayTitle a {
    color: #5a6c7d !important;
    display: block !important;
    font-size: 16px;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}




/* 去掉文章标题前面的树叶图标，往后缩进，改变文章标题颜色 */
.postTitle,
.postTitle a,
.dayTitle,
.dayTitle a,
.forFlow .postTitle,
.forFlow .dayTitle,
#topics .postTitle,
#topics .dayTitle,
.day .postTitle {
    color: #5a6c7d !important;
    background-image: none !important;
    background: none !important;
    padding-left: 20px !important;    /* 左边往右推进去 */
    padding-right: 0 !important;
}

.forFlow {
    padding-left: 20px !important;
    padding-right: 20px !important;
}




/* 文章摘要/内容颜色 */
.postBody,
.postCon,
.c_b_p_desc,
.postDesc,
#topics .postCon,
.forFlow .postBody,
.day .postCon {
    color: #7a8fa0 !important;
}
/* 文章内容容器往里缩 */
.forFlow,
#mainContent .forFlow,
.day,
.post {
    padding-left: 20px !important;
    padding-right: 20px !important;
}




/****************************************** 分类文本内容显示区配置 ******************************************/
/* 随笔分类页面的文章标题 */
.entrylistPosttitle a,
.entrylistItemTitle,
.entrylistPosttitle a:link,
.entrylistPosttitle a:visited,
.entrylistPosttitle a:hover,
.entrylistPosttitle a span {
    color: #5a6c7d !important;
}

.entrylistPosttitle a:hover {
    color: #a29bfe !important;   /* 鼠标悬停变色 */
}

/* 去掉树叶 + 标题左对齐 + 往右缩 */
.entrylistPosttitle a::before,
.entrylistPosttitle::before,
.entrylistItemTitle::before {
    display: none !important;
    content: none !important;
}

.entrylistPosttitle,
.entrylistPosttitle a,
.entrylistItemTitle {
    background-image: none !important;
    background: none !important;
    padding-left: 7px !important;    /* 往右缩的距离，想更多改大 */
    margin-left: 0 !important;
    text-align: left !important;
}




/******************************************侧边标题栏显示区配置********************************************/
/* 隐藏日历及其容器 */
/* 彻底隐藏日历及其容器 */
#blog-calendar,
#blogCalendar,
#calendar {
    display: none !important;
}

/* 如果还有残留的线，隐藏整个侧边栏的 hr */
#sideBar hr,
#sideBarMain hr {
    display: none !important;
}

/* 公告模块去掉边框 */
#sidebar_news {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* 侧边栏标题颜色 */
#sideBar h3,
#sideBar .catListTitle,
#sidebar_news h3,
#leftcontentcontainer h3 {
    color: #a29bfe !important;    /* 标题用蓝色 */
    font-size: 18px;       /* 改大标题字体 */
    font-weight: 700;       /* 加粗 */
}

/* 侧边栏内容颜色 */
#sideBar li,
#sideBar a,
#sidebar_news,
#leftcontentcontainer li,
#leftcontentcontainer a {
    color: #a29bfe !important;       /* 内容用浅灰 */
}









/* ========== 全屏自动冒泡泡（纯CSS） ========== */
/*
body::before {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 
        10vw 100vh 0 #ff6b6b,
        25vw 100vh 0 #48dbfb,
        40vw 100vh 0 #feca57,
        55vw 100vh 0 #ff9ff3,
        70vw 100vh 0 #54a0ff,
        85vw 100vh 0 #1dd1a1,
        5vw 100vh 0 #f368e0,
        15vw 100vh 0 #ff9f43,
        30vw 100vh 0 #00d2d3,
        45vw 100vh 0 #ff6348,
        60vw 100vh 0 #7bed9f,
        75vw 100vh 0 #e056a0,
        90vw 100vh 0 #2ed573,
        20vw 100vh 0 #ff4757,
        35vw 100vh 0 #3742fa,
        50vw 100vh 0 #ffa502,
        65vw 100vh 0 #2bcbba,
        80vw 100vh 0 #a29bfe,
        95vw 100vh 0 #fd79a8,
        8vw 100vh 0 #eccc68,
        28vw 100vh 0 #ff6b6b,
        48vw 100vh 0 #48dbfb,
        68vw 100vh 0 #feca57,
        88vw 100vh 0 #ff9ff3;
    animation: drift1 6s linear infinite;
}

body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 
        3vw 100vh 0 #54a0ff,
        18vw 100vh 0 #1dd1a1,
        33vw 100vh 0 #f368e0,
        48vw 100vh 0 #ff9f43,
        63vw 100vh 0 #00d2d3,
        78vw 100vh 0 #ff6348,
        93vw 100vh 0 #7bed9f,
        12vw 100vh 0 #e056a0,
        27vw 100vh 0 #2ed573,
        42vw 100vh 0 #ff4757,
        57vw 100vh 0 #3742fa,
        72vw 100vh 0 #ffa502,
        87vw 100vh 0 #2bcbba,
        97vw 100vh 0 #a29bfe,
        6vw 100vh 0 #fd79a8,
        22vw 100vh 0 #eccc68,
        38vw 100vh 0 #ff6b6b,
        54vw 100vh 0 #48dbfb,
        69vw 100vh 0 #feca57,
        84vw 100vh 0 #ff9ff3,
        16vw 100vh 0 #54a0ff,
        44vw 100vh 0 #f368e0,
        62vw 100vh 0 #1dd1a1,
        92vw 100vh 0 #ffa502;
    animation: drift2 7s linear 1s infinite;
}

html::before {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 
        7vw 100vh 0 #ff6b6b,
        23vw 100vh 0 #48dbfb,
        37vw 100vh 0 #feca57,
        53vw 100vh 0 #ff9ff3,
        67vw 100vh 0 #54a0ff,
        83vw 100vh 0 #1dd1a1,
        2vw 100vh 0 #f368e0,
        14vw 100vh 0 #ff9f43,
        32vw 100vh 0 #00d2d3,
        47vw 100vh 0 #ff6348,
        59vw 100vh 0 #7bed9f,
        74vw 100vh 0 #e056a0,
        89vw 100vh 0 #2ed573,
        4vw 100vh 0 #ff4757,
        19vw 100vh 0 #3742fa,
        36vw 100vh 0 #ffa502,
        52vw 100vh 0 #2bcbba,
        66vw 100vh 0 #a29bfe,
        82vw 100vh 0 #fd79a8,
        96vw 100vh 0 #eccc68;
    animation: drift3 5s linear 2s infinite;
}

html::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 
        1vw 100vh 0 #54a0ff,
        17vw 100vh 0 #1dd1a1,
        29vw 100vh 0 #f368e0,
        41vw 100vh 0 #ff9f43,
        56vw 100vh 0 #00d2d3,
        71vw 100vh 0 #ff6348,
        86vw 100vh 0 #7bed9f,
        9vw 100vh 0 #e056a0,
        24vw 100vh 0 #2ed573,
        39vw 100vh 0 #ff4757,
        51vw 100vh 0 #3742fa,
        64vw 100vh 0 #ffa502,
        79vw 100vh 0 #2bcbba,
        94vw 100vh 0 #a29bfe,
        11vw 100vh 0 #fd79a8,
        31vw 100vh 0 #eccc68,
        46vw 100vh 0 #ff6b6b,
        58vw 100vh 0 #48dbfb,
        73vw 100vh 0 #feca57,
        91vw 100vh 0 #ff9ff3;
    animation: drift4 6.5s linear 0.5s infinite;
}*/

/* 凌乱飘动动画 - 每个方向不同，有左右摇摆 */
/*
@keyframes drift1 {
    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
    20%  { transform: translateY(-20vh) translateX(30px) scale(1.1); opacity: 0.9; }
    40%  { transform: translateY(-40vh) translateX(-20px) scale(0.9); opacity: 0.8; }
    60%  { transform: translateY(-60vh) translateX(50px) scale(1.2); opacity: 0.5; }
    80%  { transform: translateY(-80vh) translateX(-35px) scale(0.7); opacity: 0.3; }
    100% { transform: translateY(-110vh) translateX(15px) scale(0.4); opacity: 0; }
}

@keyframes drift2 {
    0%   { transform: translateY(0) translateX(0) scale(0.8); opacity: 1; }
    25%  { transform: translateY(-25vh) translateX(-40px) scale(1.3); opacity: 0.9; }
    50%  { transform: translateY(-50vh) translateX(25px) scale(1); opacity: 0.6; }
    75%  { transform: translateY(-75vh) translateX(-30px) scale(0.8); opacity: 0.3; }
    100% { transform: translateY(-110vh) translateX(45px) scale(0.5); opacity: 0; }
}

@keyframes drift3 {
    0%   { transform: translateY(0) translateX(0) scale(1.2); opacity: 1; }
    30%  { transform: translateY(-30vh) translateX(50px) scale(0.9); opacity: 0.8; }
    60%  { transform: translateY(-60vh) translateX(-45px) scale(1.1); opacity: 0.4; }
    100% { transform: translateY(-110vh) translateX(20px) scale(0.6); opacity: 0; }
}

@keyframes drift4 {
    0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0.9; }
    20%  { transform: translateY(-15vh) translateX(-25px) scale(1.4); opacity: 1; }
    45%  { transform: translateY(-45vh) translateX(35px) scale(1.1); opacity: 0.7; }
    70%  { transform: translateY(-70vh) translateX(-50px) scale(0.8); opacity: 0.3; }
    100% { transform: translateY(-110vh) translateX(10px) scale(0.4); opacity: 0; }
}
*/