$color-red: #FF0000;
$color-black: #333;
$color-blue: #0064c1;
$color-hove: #0064c1;
$color-gray: #9ca3af;
$color-lightGray: #9ca3af;
$color-lightGrayBg: #F0f2f4;
$heatFont:Georgia,"Nimbus Roman No9 L","Songti SC",STSong,"AR PL New Sung","AR PL SungtiL GB",NSimSun,SimSun,"TW\-Sung","WenQuanYi Bitmap Song","AR PL UMing CN","AR PL UMing HK","AR PL UMing TW","AR PL UMing TW MBE",sans-serif;

$dbgBorder:none;//ssolid 1px red;
$hmbloksizeW:11px;
$hmbloksizeH:13px;
$dayGap:1px;
$hmdaywidth: $dayGap * 52 + $hmbloksizeW * 53;
$hmmonthWidth:40px;
$hmmwidth: $hmmonthWidth + $hmdaywidth;
li {
  padding: 0.2rem;
}

main{
  margin:  2.5em 0;
}
body{
  font-family: monospace;
  font-size: 1.15rem;
  // background-color: #fafafa;
  margin: 0;

  // &::before{
  //   content: "";
  //   position: fixed;
  //   left: 0;
  //   right: 0;
  //   top: 0;
  //   bottom: 0;
 
  //   // background-image: url(../image/bg-2.png)  ;
  //   // background-color: #fffef8   ;//#fffef9;
  //   z-index: -1;
  //   // filter: grayscale(0.8);
  //   // opacity: 0.9;
  // }
}

article{
  line-height: 1.6;
}
.w {
  margin: auto;
  max-width: 960px;
  padding: 2em ;
  word-wrap: break-word;
  background-color: white;
  // box-shadow: 0 2px 3px 0 #eee
}

code.highlighter-rouge {
  color: $color-black;
  background: $color-lightGrayBg;
  border-radius: 5px;
  padding: 0 5px;
  margin: 5px;
}

code {
  color: $color-black;
  background: $color-lightGrayBg;;
  max-height: 35rem;
}

div.highlighter-rouge code {
  border-radius: 10px;
  display: block;
  overflow: auto;
  padding: 1rem;
}

img {
  width: 60%;
  display: block;
  margin: 0 auto;
}

blockquote {
  font-style: italic;
  border-left: 5px solid $color-lightGray;
  color: #999;
  // padding: 2rem 0.25rem .25rem 0.25rem;
  padding: 15px;
  margin: 3em 0;
  background-color: $color-lightGrayBg;

  
  // &::before{
  //   content: "";
  //   display: block;
  //   background: url(../image/quote.svg) no-repeat 50% 50%;
  //   width: 27px;
  //   height: 20px;
  //   position: absolute;
  //   z-index: 1;

  //   margin-left: -10px;
  //   margin-top: -24px;
  //   opacity: 0.1;
    
  // }
}

blockquote p {
  margin: 0
}

table {
  width: 100%;
}
table{
  box-shadow: 0px 0px 5px #e0e0e0;
}
th{
  background-color: #f5f5f5;
}
table,
th,
td {
  border: thin solid #e0e0e0;
  border-collapse: collapse;
  padding: 0.4em 1em ;
}
tr:nth-child(even){
  background-color: #f5f5f5;
}

// hr {
//   margin-top: 2rem;
//   margin-bottom: 2rem;
  

//   border: 0;
//   padding: 3px;

//   background: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 5px);
// }

hr{
  margin: 2rem 0;
  border:none;
  text-align: center;
  color: $color-gray;
  border-bottom: $color-lightGray dashed 1px;
  

  // &:before { content: '/////' }
  // &:after { content:  '/////' }
  // &[data-content] {
  //   content: 'xxxxxx';
  // }
}
  

a {
  text-decoration: none;
  color: $color-blue;
}


.w > h1>a {
  color: $color-black;
}

.w > h1>a:hover {
  color: $color-black;
}

 

nav{
 /* 关键样式 */
 background-color: transparent;
 background-image: radial-gradient(transparent 1px, #ffffff 1px);
 background-size: 4px 4px;
 backdrop-filter: saturate(50%) blur(10px);
 /* 这个只是固定在页面上面 */
 position: sticky;
 top: 0px;

 align-content: center;
 z-index: 1000;
}
 
.navul {
  padding: 0;
  display: flex;
  font-weight: 700;
  align-items: center;
}

.navli {
  list-style-type: none;
  margin-right: 1rem;
  font-size: 1.125rem;
}
 
.postlistul {
  padding: 0
}

.postlistli {
  list-style-type: none;
  display: flex;
  align-items: first baseline;
  padding: 5px 0;

}

.postlistli  a,.pagebar a ,.tags-tag{
  color: #000;
}
 
span.next{
  color: #c3c3c3;
}
  
date  {
  color: $color-lightGray;
  font-size: 0.9em;
  margin-right: 1em;
}
 
time {
  color: $color-lightGray;
  font-weight: 500;
}
.tag {
  color: $color-lightGray;
  font-weight: 500;
}



.pagebar {
  margin-top: 2rem;
  display: flex;
  // float: right;
  align-items: baseline;
}

.page_number {
  color: $color-black;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.largeli {
  font-weight: bolder;
  color: $color-black;
  font-size: 1.6rem;
  padding: 2.25rem 1rem 0.5rem 0;
}

.largeli0 {
  padding: 0 0 0.5rem 0;
}

.footer{
  margin-top: 4rem;
  color: #aaa;
  width: 100%;
  font-size: 0.9rem;
  text-align: center;
}

.footer a {
  color: #808080;
}

a:hover {
  text-decoration: underline;
  color:$color-hove;
}

.curNav {
  color: $color-blue;
}

.nav{
  color: $color-black;
}

input[type="button"]{
  /* 设置按钮的背景色，字体样式等 */
  background-color: #e0e0e0;
  border: none;
  color: $color-black;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
 
  cursor: pointer;
  border-radius: 3px;
  /* 鼠标悬停时改变按钮颜色 */
}
input[type="button"]:hover{
  background-color: $color-black;
  color: white;
}

  
pre{
  white-space: pre-wrap; /* 保留空白字符，但是允许自动换行 */
  overflow-wrap: break-word; /* 在单词内允许换行 */
}

pre>code{
  background-color: #1e131eff;
  color: #e7e7b1;
  box-shadow: 0px 0px 8px   #000;
}

pre>code::before {
  content: url('../image/dots.svg');
  display: block;  
  margin-top:-1rem;
}
 

img{
  max-width: 80%;

}

.iconchar{
  margin-left: 10px;
  // filter: grayscale(0.1) brightness(0.6);
  font-size: 0.6em;
}

.heatmap{
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: $hmmonthWidth 1fr;
  width: $hmmwidth;
  border: $dbgBorder;
}

.heatmap-title{
  color: $color-black;
  font-size: 1.2rem;
}
 
 
.heatmap-month{
  
  grid-column-start: 2;
  grid-column-end: 3;

  display: grid;
  grid-template-columns: repeat(12,1fr);

  width: $hmdaywidth;
  border: $dbgBorder;
  
}

 
.heatmap-month-cell{
  display: flex;
  align-items: center;
  justify-content: center;

  font-family:  $heatFont;
  font-size: 0.8rem;

  height: 12px;

  padding: 0.2em 0;
  
}


.heatmap-week{
  
  grid-row-start: 2;
  grid-row-end: 3;
  display: grid;
  // grid-template-rows:repeat(4,1fr);
  

  grid-auto-flow: row;
  height: $hmbloksizeH * 7  + $dayGap * 6;
}
 

.heatmap-week-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
  font-size: 0.8rem;
  font-family:  $heatFont
}

.heatmap-day{

  display: grid;
  grid-template-columns: repeat(53,1fr);
  grid-template-rows: repeat(7,1fr);
  grid-auto-flow: column;
  gap: $dayGap;
  width: $hmdaywidth;
}

.heatmap-day-cell{

  border-radius: 2px;
  // height: 20px;
  width: $hmbloksizeW;
  height: $hmbloksizeH;
}

.heatmap-day-cell a{
  height: 100%;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow:hidden;
}


.hm-check-nodata{
  background-color: #93d5dc;
}

.hm-check{
  background-color: #40c463bb;
  position: relative;
  cursor: pointer;
}

.hm-check2{
  background-color: #40c463ff;
  position: relative;
}

.hm-check-no-a{
  background-color: #edebf0;;
}


.hm-check-no-b{
  background-color: #edebf0aa;
}

.heatmap-day-cell:hover{
  transform: scale(1.3);
  z-index: 999;
}

.heatmap-day-cell:hover .hm-tip{
  display: block;
}

.hm-tip{
  position: absolute; /* 让子元素浮动 */
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 999;

  width: auto;
  font-size: 0.8rem;
  display: none;
}

.hm-date{
  color: #fff;
  text-align: center;

  padding: 0;
}

.hm-title{
  color: #fff;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding-left:0.5rem;

  max-width: 600px;
  
}

.hm-tiplink{
  padding: 0.2rem 0;
}

.red{
  background-color: #ee5500;
}

.border{
  border:solid 1px red;
}