/* flex */
* {
  box-sizing: border-box;
  margin: 0; /*这两个都还是要指定的，否则会出现怪异的问题*/
  padding: 0;
}
body {
  padding: 0% 20% 0% 20%;//目前只有从这里限制博文宽度不至于过宽导致转行找不到下一回 focus区
  font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  background-color: #fafafa;
}
li {
  list-style-type: none;
}

/*body {
	max-width: 700px; for the large screens it's best to limit to maximum width
}*/
img {
  max-width: 100%;
}
a {
  text-decoration: none; /*去掉下划线*/
  color: #5fbf5e;; /*可以避免访问后link变色的问题*/
}

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

/********************************************************general css end*/
.title sup{
/*color:red;*/
font-size: 20%;
}


#top_nav,
#big_banner,
.dayTitle,
#blog_post_info,
#under_post_news,
#cnblogs_c1,
#cnblogs_c2,
#ad_t2,
#under_post_news,
#under_post_kb,
.p_n_p_prefix,
#commentbox_opt a,
#comment_form_container > p:nth-child(7),
#comment_nav,
#comment_form_container > p:nth-child(3),
#commentform_title,
.feedback_area_title ,
.login_tips,
#footer,
#BlogPostCategory,
#HistoryToday,
.entrylistTitle,
.entrylistPostSummary,
#homepage_top_pager > div,
#comment_form,
#bannerbar img{
  display: none;
}

.icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
     }


iframe{
  width: 100%;
}

/* 哔哩哔哩 iframe 自适应 */
iframe[src*="player.bilibili.com/player.html"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* CSS原生比例写法 */
  background: #000;
  border: none;
  border-radius: 8px; /* 可选 */
}

#cnblogs_post_body img {
  max-width: 100%;
}

.feedbackItem {
  border: solid #d5d5d5 0.001em;
  border-radius: 0.5em;
}
.feedbackManage {
  float: right;
}
#blogTitle {
  /*font-family: "楷体", "Microsoft YaHei", Arial;*/
  font-size: 300%;
  /*padding: 6% 0% 2% 35%;*/
  text-align: center;
  /*background-image: url(https://www.csszengarden.com/214/huntington.jpg);*/

}

.title {
    padding: .5em 0;
    /* height: 4em;*/
         display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


/* === 修改点 1：将 .entrylistItemTitle 改为 .entrylistPosttitle，统一对标题容器应用样式 === */
.entrylistPosttitle, .postTitle {
  clear: both;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 2em;
}

/* 方案二：简约卡片样式 (智能对齐版) */
.entrylistDescription {
  background-color: #ffffff; /* 白色背景 */
  border: 1px solid #e7e7e7; /* 浅灰色细边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 微弱的阴影效果 */
  padding: 1.5em;
  margin-bottom: 2.5em;
  color: #333333;
  line-height: 1.6;
  border-radius: 6px; /* 圆滑的边角 */

  /* --- 以下是实现智能对齐的关键样式 --- */

  /* 1. 将容器设置为 flex 布局 */
  display: flex; 

  /* 2. 让内容（文本块）在容器中水平居中 */
  /* 这在单行时会实现居中效果 */
  justify-content: center; 

  /* 3. 保证文本在换行后是左对齐的 */
  /* 这是多行时左对齐效果的关键 */
  text-align: left; 
}
/* === 修改点 2：增加 .entrylistPosttitle a 选择器，让页面2的标题链接也应用此样式 === */
.title a, .postTitle a, .entrylistPosttitle a, #navigator ul a {
  color: #5d5d5d;
  padding: 2% 4%;
  display: block;
}

#navigator {
     padding: 0em 0em 4% 0em;/*4% 0em;*/
     visibility: hidden; /*隐藏默认的导航栏*/
}
#navigator ul {
  display: flex;
  flex-wrap: wrap; /*转行*/
  justify-content: space-around; /*整块内容水平居中*/
  /*border-top: .01em  solid;
	border-bottom: .01em  solid;*/
  color: #5d5d5d; /*以至于边框和字的颜色一样*/
  /*border: .01em solid blue;*/
  /*margin: 3em 0em;/*没办法，不能放在ul里*/*/
}

#navigator  ul li {
  flex-grow: 1;/*grow到填满，平分区域*/

   
  /*border: .01em solid;*/ /*是为了手机的时候栏目名转行的区分，没有的话不方便，上面用了20%造成的*/
  /*padding: 1em 0em;*/

  border-right: .01em solid #d5d5d5;
}
#navigator > ul > li:last-child{
      border-right: none; 
}
#navigator ul li a {
  display: block;/*这样才能最大化a的面积*/
  text-align: center;
}


div.commentform textarea {
  width: 100%;
  height: 10em;
}
#about,.loginTips {
  text-align: center;
       display: block;
            /*background: #f0f0f0;*/
                  padding: 1em;
}

.postDesc, .entrylistItemPostDesc {
  text-align: right;
 display: none;
}
.postCon {
    padding: 2% 4%;
 display: none;
}
#BlogPostCategory {
      margin-bottom: 0;
}

#sideBar {
  display: none;
}

.entrylistItem, .day {
 /*margin: 2em 0;*/
 margin: 0;
}

#promotion {
  margin: 3% 0%;
  background: #fff;
  border: 0.3em solid #e0dfcc;
  border-radius: 1em;

  display: flex;
  flex-wrap: wrap; /*转行*/
  justify-content: center; /*整块内容水平居中*/
  align-items: center; /*并排垂直居中*/
}
#postMeta{
 display: flex;
  flex-wrap: wrap; /*转行*/
  justify-content: space-around; 
  align-items: center; /*并排垂直居中*/
 margin: 1em;
}

#promotion ul li {
  margin: 1em;
}

   #cnblogs_post_body a{
/*text-decoration: underline;横线会直接贴在汉字下面，所以不用，用下面的*/
border-bottom: 1px solid grey;
     color: black;
   }

@media screen and (max-width: 720px) {
  body {
    padding: 0% 2%;
  }
  /* === 修改点 3：增加 .entrylistPosttitle 选择器，应用移动端样式 === */
  .postTitle, .entrylistPosttitle {
    border-top: 1px solid #e0e0e0;
  }
  #cnblogs_post_body {
    border-bottom: 1px solid #e0e0e0;
 font-size: 1.4em;//默认的在手机上太小
  }

}

@media screen and (min-width: 721px) {
  /* === 修改点 4：增加 .entrylistPosttitle 选择器，应用桌面端样式 === */
  .postTitle, .entrylistPosttitle {
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
    background: #fff;
  }
  #cnblogs_post_body {
    /*box-shadow: 0 4px 6px .2px #aaaaaa;*/
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
    background: #fff;
    padding: 1% 4%;
  line-height: 200%;

  }
}


#donate{
display: flex;
     justify-content: center;
  padding: .5em 0;
/* background-color: #ec6149;
  border-radius: 2em; */
}