/* 仅在docsify中使用，id是#main，不知道会不会影响其他如jekyll minima */
/* 修改docsify文章两边的宽度，否则手机看起来太窄了 */
article.markdown-section {
    max-width: 92%;
}

/* [hover to see](#spoiler "Spoiler Filled Text") */
.spoiler {
  text-decoration: none !important;
  cursor: default;
  padding: 8px;
  background-color: #FFF8DC;
  border-left: 2px solid #ffeb8e;
  border-right: 2px solid #ffeb8e;
  display: inline-block;
  color: #FFF8DC;
  text-align: center;
  font-size: 20px;
}

.spoiler:hover {
  cursor: auto;
  color: black;
  transition: color .5s ease-in-out;
}


/*各种icon*/

.check {
  color: black;
  background-color: #F5F5F5;
  font-size: 100%;
  font-style: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  text-indent: -30px;
  padding-left: 39px;

}
.check:hover {
  text-decoration: none;
  color: black;
}
.check:before {
  content: "✔️";
  padding-right: 10px;
  background-color: #F5F5F5;
  font-size: 120%;
}


.icon {
  color: black;
  background-color: #F5F5F5;
  font-size: 100%;
  border-left: 5px solid yellow;
  padding-top: 20px;
  padding-bottom: 20px;
  text-indent: -60px;
  padding-left: 63px;
  padding-right: 5px;
}
.icon:hover {
  text-decoration: none;
  color: black;
}
.icon:before {
  margin-left: 15px;
  margin-right: 15px;
  background-color: #F5F5F5;
  font-size: 165%;
}

p.tips {
  border-left: 5px solid yellowgreen;
  background-color: #F5F5F5;

}
p.tips:before {
  content: "💡";
  background-color: #F5F5F5;

}

p.notice {
  border-left: 5px solid gold;
}
p.notice:before {
  content: "⚠️";
}


p.question {
  border-left: 5px solid lightpink;
  /*font-style: italic;*/
}
p.question:before {
  content: "❓ ";
  font-size: 140%;
}

p.no {
  border-left: 5px solid #DC3023;
  background-color: #F5F5F5;

}
p.no:before {
  content: "🚫";
  background-color: #F5F5F5;
}

p.todo {
  border-left: 5px solid #FFA400;
  background-color: #F5F5F5;
  text-indent: -103px;
  padding-left: 100px;

}
p.todo:before {
  content: "☐ TODO: ";
  /*font-weight: bold;*/
  font-size: 120%;
  /*font-style: italic;*/
  background-color: #F5F5F5;
}

p.label {
  border-left: 5px solid #E4C6D0;
  background-color: #FCEFE8;

}
p.label:before {
  content: "🏷️";
  background-color: #FCEFE8;
}


p.star {
  border-left: 5px solid gray;
  background-color: #CCE8C1;

}
p.star:before {
  content: "⭐";
  background-color: #CCE8C1;
}



/* 折叠 */
details > summary {
  background-color: #F5F5F5;
  color: black;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-left: 6px solid #BBCDC5;
}

details > summary:hover {
  background-color: #BBCDC5;
}

details {
  padding: 0px;
  padding-left: 20px;
  /*max-height: 0;*/
  overflow: hidden;
  border-left: 2px solid #BBCDC5;
}

/* tag */
/* https://codepen.io/wbeeftink/pen/dIaDH */
.cser-tag {
  font-weight: bold;
  background: #F5F5F5;
  border-radius: 3px 0 0 3px;
  /* color: #999; */
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.cser-tag::before {
  background: #7bcfa6;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.cser-tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.cser-tag:hover {
  background-color: #7bcfa6;
  color: white;
}

.cser-tag:hover::after {
  border-left-color: #7bcfa6;
}