/* wenzhang=文章 */
/* pai = 排 */
/* kong = 空 */
/* jiao = 脚 */
/* ==========================================
   Header wrapper — never wider than .container
   ========================================== */

   /* source/css/style.scss  ↓ add anywhere after the @import */
.box{
   font-family: "Poetsen One", "Helvetica Neue", Arial, sans-serif !important;
}


   .post-nav{
  display:flex;
  justify-content:space-between;   /* push to edges */
  gap:1rem;
  margin:2.5rem 0;
}

.btn{
  display:inline-block;
  padding:.5rem 1.25rem;
  font:600 1rem/1 'Oswald',sans-serif;
  color:#fff;
  background:#000;
  border:2px solid #000;
  border-radius:4px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}

.btn:hover{ background:#fff; color:#000; }

.btn.disabled{
  opacity:.35;
  pointer-events:none;           /* unclickable */
  cursor:default;
}

/* CSS / SCSS */
.img-center{
  display:flex;            /* create a flexbox container  */
  justify-content:center;  /* horizontal centering        */
  align-items:center;      /* vertical centering (if you
                              give the wrapper a height)   */
  /* optional: set a height if you want vertical centering
     .img-center{ min-height:300px; }                      */
}

.img-center img{
  border:2px solid #000;   /* 2-px solid black border      */
  max-width:100%;          /* stays responsive             */
  height:auto;
}

   /* ✱ LAST colour rule in the stylesheet */
.Text,
.Text * {            /* include anything nested */
  color: #fff !important;
  padding-left: 5px;
}

.titz{
  width:100%;                 /* fluid until cap is reached            */
  max-width:64.0625rem;       /* same hard cap your .container uses    */
  /* 64.0625rem ≈ 1025 px — change here if you ever adjust .container */

  margin:0 auto;              /* centre the block                      */
  padding-block:.5rem;        /* breathing room top & bottom           */

  background:#eaeaea;         /* new background colour                 */
  text-align:center;
}

/* header text (unchanged) */
.titzhead h1{
  margin:0;
  font-weight:700;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.1;
}
.media-content {
    opacity: 90%;
}

#pai, 
.pai {
  font-family: "Bebas Neue", sans-serif;
  font-size: 4rem;   /* ≈64 px on most browsers */
  line-height: 1;  /* keeps tall letters from touching */
}

.Text {
    font-family: "Bebas Neue";
    font-size: 2rem;
    color: #FFF !important; 
}

/* Full-viewport background image, always centered & covering */
.box{
  /* replace with your image path or URL */
  /* ackground-image: url("background2.png"); */

  /* ensure no tiling and keep it centred */
  background-repeat: no-repeat;
  background-position: center center;

  /* “cover” scales the image so it always fills the viewport
     while preserving aspect ratio */
  background: transparent;

  /* optional — keeps the image fixed while you scroll */
  background-attachment: fixed;

  /* reset margins so the image touches the edges */
  margin: 0;
}

#page-container {
      background: #eaeaea url("/header3.png") no-repeat top left;
  background-size: 30% auto;

}
/* 主页框框 */
#content-wrap > div  {
    margin: 0 auto;

}

/* 框框位置 */
#content-wrap > div > div > p{
    display: flex;    
    width: 100%; 
    height: 100%;
    justify-content: space-around;
}

.Text>a{
    color:#000;
    font-size: 20px;
}

.pai {
    display: flex;    
    width: 60%;
    justify-content: space-around;
    font-size: 25px;
    padding-left: 18%;
    margin: 30px 30px 40px 0px;
}

a > span {
    color:#000;
}

strong > a {
    color:#000;
}

h1,h2,h3,h4,h5 > a{
    color:#000;
}

h1>a, h2>a, h3>a, h4>a {
    color:#000;
}

.category-list-item>.category-list-link{
    color:#000;
}


.kong{
    color:#000;
    margin: 0px 0px 0px 0px;
}

.box{
    border-style:solid;
    border-width:medium;
}

/* 换页 */

/* .jiao{
    color:#000;
    margin: 0px 0px 0px 0px;
} */

.konga {
        display: flex;    
        width: 100%;
        justify-content: space-around;
        margin: 5% 0px 0px 0px;
        color:#000;
}

/* 搜索框下面的文字 变短原因 span */
.konga2 {
    display: flex;    
    width: 100%;
    justify-content: space-around;
    margin: 5% 0px 0px 0px;
    color:#000;
}

#content-wrap > div > div > h1{
    display: flex;    
    width: 100%;
    justify-content: space-around;
    font-size: 25px;
    /* margin: 30px 30px 40px 0px; */
}
#content-wrap > div > div > h3{
    display: flex;    
    width: 100%;
    justify-content: space-around;
    font-size: 25px;

}

img{
    width: 100%;  
}

/* 日期框框 */
.bx{
    border-style:solid;
    border-width:medium;
    font-size: 1px;
    font-weight: bold;
    color:#000;
}

p > a{
     color:#000;
}


/* 文章布局 */
.wenzhang-container {
    margin: auto;
    max-width: 960px;
    padding: 16px 16px;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.6;
    font-size: larger;
}

/* 表格 */
#content-wrap > div > div > wenzhang > table > tbody > tr > td{
    border: 1px solid;
    border-spacing: 2px;
    border-color: #000;
}

/* 分类中间对其 */
#content-wrap > div > span > h2 > ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#content-wrap > div > span > h2 > ul > li{
    /* 阴影 */
    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
    /* margin-bottom: 1.6rem; */
    /* border-style:solid; */
    /* color:#000; */
    /* overflow-wrap: break-word; */
    /* word-break: break-word; */
    font-size: larger;
    /* 长度 */
    margin-bottom: 1.6rem;
    /* 边框 */
    border: 2px solid #000000;
    padding: 10px 10px 10px 10px;
    background: #fffefe;
    border-radius: 10px;

    border-style:solid;
    border-width:medium;
    display: inline-block;
    margin: 10px 10px 10px 10px;
    text-decoration: none;
    color: #000;
}


/* 关于框框 */
#text1{
    border-spacing: 2px;
    border: 3px solid;
    background: #fffefe;
    border-color: #000;
    border-radius: 10px;
    padding: 30px;


}
/* 框框文字 */
#text2{
    margin: 0 auto;
    text-align: center;
    font-weight:900;
    font-size: 2rem;;
}
/* 分类框框 */
#text3{
    min-width: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
/* 分页字体 */
#text4{
    /* font-size: 75%;
    margin: 10px 10px 10px 10px; */
        /* 阴影 */
        display: flex;   
        justify-content: center;
        box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
        /* margin-bottom: 1.6rem; */
        /* border-style:solid; */
        /* color:#000; */
        /* overflow-wrap: break-word; */
        /* word-break: break-word; */
        font-size: larger;
        /* 长度 */
        margin-bottom: 1.6rem;
        /* 边框 */
        border: 2px solid #000000;
        padding: 10px 10px 10px 10px;
        background: #fffefe;
        border-radius: 10px;
    
        border-style:solid;
        border-width:medium;
        display: inline-block;
        margin: 10px 10px 10px 10px;
        text-decoration: none;
        color: #000;
}

/* 搜索 */
/* 换页 */
#text_input, .jiao {
    /* 边框 */
    border: 3px solid #000000;
    background: #fffefe;
    border-radius: 10px;
    color: #000;
    text-align: center;
    margin: 0 auto;
    display:flex;
      
}

#footer > span > a{
  font-size: 2.1875rem;  
}

/* 输出 */
#text_output{
    text-align: center;
    margin: 0 auto;
}

#text_output > div > div{
    border: 2px solid #000000;
    color: #000;
    font-size:25px;
    border-radius: 10px;
    margin: 10px 10px 10px 10px;
    padding: 1px 1px 1px 1px;
}


/* 框框位置上下位置 */
.box:not(:last-child){
    margin-bottom: 0.75rem;
}

body {
    color: #4a4a4a;
    font-size: 1em;
    font-weight: 500px;
    line-height: 1.5
}

a {
    cursor: pointer;
    text-decoration: none
}


.box {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
    color: #4a4a4a;
    display: block;
    padding: 0.5rem
}

/* 框框宽度 */

@media screen and (min-width:64.0625rem) {
    .container {
        max-width: 64.0625rem !important;
    }
}


/* 代码框背景颜色 */

/* #content-wrap > div > div > wenzhang > figure{
    background-color: rgb(249, 249, 249);


} */

/* 文章分类 */
#content-wrap > div > div > ul > li > a{
    border-style:solid;
    border-width:medium;
    -webkit-text-stroke: 0.3px !important;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
    margin: 0.5rem;
}

/* 文章分类文字加深 */
#content-wrap > div > div > ul > li > a{
    color: #000;
    font-size: 20px;
}

/* 文章时间 */
#content-wrap > div > div > wenzhang > div > div > a{
    padding: 1px !important;
    margin-bottom: 2px !important;
    border-radius: 4px;
}





/* 关于的框框 */
#content-wrap > div > div > wenzhang > kuankuan {
    border-style:solid;
    border-width:medium;
    background-color: #ffffff;
    border-radius: 6px;
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
} 

/* 博客版权 */

body > bokebangquan,#content-wrap > bokebangquan > p{
    background-color: #ffffff;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

#content-wrap > div > div > wenzhang > figure > table{
    border-style:solid;
    border-width:medium;
    background-color: #ffffff;
    border-radius: 6px;
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
}

/* 屏蔽来必力广告 */
#trc_wrapper_52443{
    display: none !important;
}
#trc_header_56062 > span{
    display: none !important;
}
#taboola-livere > div{
    display: none !important;
}
/* 评论区黑白 */
/* #lv-container{
    filter: grayscale(100%) !important; 
    color: #000 !important;   
} */
/* 时间正序 时间倒序 同感正序 */
/* #container {
    display: none !important;
    filter: grayscale(100%) !important; 
    color: #000 !important;  
} */



/* 图片变黑白 */
/* img{
    filter: grayscale(100%) !important;
}
#sns-login > button{
    filter: grayscale(100%) !important;
}

#list > div > div > div > ul > li > button > img{
    filter: grayscale(100%) !important;
} */

/* 评论变黑白 body整个变成黑白 因为实在太多了 所以懒得选 */
body{
    filter: grayscale(100%) !important; 
    color: rgb(8, 4, 4) !important;   
}

/* 代码高暗 */
/* <文字> */
.hljs-name {
    color: #6b6b6b
}
/* 斜体 */
.hljs-emphasis，.hljs-meta,
.hljs-tag {
    font-style: italic
}
.hljs {
    color: #444;
}
.hljs-comment {
    color: #888
}
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
    font-weight: 700
}
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
    color: #444d5c
}
.hljs-section,
.hljs-title {
    color: #323233;
    font-weight: 700
}
.hljs-link,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
    color: #5c5151
}
.hljs-literal {
    color: #202020
}
.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
    color: #0b1414
}
.hljs-meta .hljs-string {
    color: #000000
}
.hljs-emphasis {
    font-style: italic
}
.hljs-strong {
    font-weight: 700
}
.box {
  background: rgba(0,0,0, 0.3);  /* 80 % opaque */
}

.media-content {
      background: #eaeaea url("/header1.png") cover top left;

}
.Text {
  position: relative;         /* create a containing block */
  color: #fff;
}

/* translucent backdrop layer */
.Text::before {
  content: "";
  position: absolute;
  inset: 0;                   /* cover the whole element */
  background: rgba(0, 0, 0, 0.8);  /* 80 % opaque */
  z-index: -1;                /* sit behind the text */
  pointer-events: none;       /* let clicks pass through */
}

/* ─────────────────────────────────────────────
   Mobile override – centred & sized correctly
   ───────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* wrapper */
  .titz{
    /* fluid until it hits 90 vw, never wider than container */
    width: min(585px, 90vw) !important;     
    margin-left: 10%;             
    overflow: visible;            
    background: #fff;
}
  /* headline */
  .titzhead h1{
    /* 80 px desktop → 72 px mobile, but scale further on tiny screens */
    font-size: clamp(2.25rem, 10vw, 4.5rem) !important;
    margin: 0;                    
  }
  .pai {
     margin-bottom: 0px;
     margin-left: 10%;
     font-size: small;
  }
  .container {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}