:root {
  --head-bg: url(../image/head-light.jpg) no-repeat center/cover;
  --main-bgc: #f5f5f5;
  --content-bgc: rgba(255, 255, 255, 0.8);
  --select-bgc: #181c27;
  --content-fc: #000;
  --list-fc: #666;
  --md-bgc: rgba(0, 0, 0, 0.3);
  --scroll-track-bg: #ccc8;
  --scroll-thumb-bg: rgba(194, 194, 194);
  --scroll-thumb-hover-bg: #aaaf;
  --topnav-bg: rgba(40, 42, 44, 0.6);
  --article-icon-hv: #6ec3f5;
  --black-white: #000;
  --article-bd: #d3d6da;
  --history-tag: #f3f3f3;
  --history-line-bg: #f1f1f1;
  --meta-bg: #f3f3f3;
  --comment-bg: #fff;
  --textarea-bg: #f4f4f4;
  --commentator-c: #525252;
  --author: #27ae60;
  --font-hover: #ccc;
}
[color=dark] {
  --head-bg: url(../image/head-dark.png) no-repeat top/cover;
  --main-bgc: #181c27;
  --content-bgc: #262a32;
  --select-bgc: rgba(255, 255, 255, 0.8);
  --content-fc: #eee;
  --list-fc: #ccc;
  --md-bgc: rgba(255, 255, 255, 0.3);
  --scroll-track-bg: #42454e;
  --scroll-thumb-bg: #848589;
  --scroll-thumb-hover-bg: #a6a6a6;
  --topnav-bg: #181c27cc;
  --article-icon-hv: #3e8dc5;
  --black-white: #fff;
  --article-bd: #ccc;
  --history-tag: #3c495bbb;
  --history-line-bg: #44474e;
  --meta-bg: #364150;
  --comment-bg: rgba(33, 40, 51, 0.9);
  --textarea-bg: #364252;
  --commentator-c: #ffffffb3;
  --author: #fe2c55;
  --font-hover: #666;
}
.content {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  color: var(--list-fc);
  transition: background-color 0.8s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: var(--content-bgc);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background: var(--scroll-thumb-bg);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-bg);
}
.head-bg {
  background: var(--head-bg);
}
body,
html {
  background: var(--main-bgc) url(../image/timo.png) 0 0 / cover;
  background-attachment: fixed;
}
.md section {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: var(--content-bgc);
}
.main-list section {
  color: var(--list-fc);
}
.main-content section {
  color: var(--content-fc);
}
.main-content section article {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.main-content section:hover {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  box-shadow: 2px 6px 12px var(--md-bgc);
}
#pc-topnav {
  background: var(--topnav-bg);
}
::selection {
  color: var(--content-bgc);
  background-color: var(--select-bgc);
}
.footer-container ::selection {
  color: white;
  background-color: transparent;
}
.introduce {
  position: relative;
  top: -45px;
  color: var(--content-fc);
  text-align: center;
  padding: 10px;
}
.article-container .article-cover {
  background: var(--main-bgc);
}
.article-container .article-introduce header {
  color: var(--content-fc);
}
.article-container .article-introduce header .article-title {
  color: var(--content-fc);
}
.article-container .article-introduce header .article-title:hover {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: var(--article-icon-hv);
}
.article-container .article-footer {
  border-top: 1px solid var(--article-bd);
}
.article-container .article-footer p a {
  color: var(--black-white);
}
.article-container .article-footer p a:hover {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: var(--article-icon-hv);
}
.article-container .article-footer p span:hover {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: var(--article-icon-hv);
}
.history h2,
.history h3 {
  color: var(--black-white);
}
.history .history-tag {
  background-color: var(--history-tag);
}
.history .history-content {
  border-left: 4px solid var(--history-line-bg);
}
.blackOrWhite {
  color: var(--black-white);
}