html::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.051);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.249);
}

[data-mode=light] body {
  background-color: #f0f0f0;
  color: #262626;
}
[data-mode=light] .header > .title > a > span {
  color: #141414;
}
[data-mode=light] .header > .title > a > span:hover {
  color: #595959;
}
[data-mode=light] .header > .description {
  color: #595959;
}
[data-mode=light] .header > .description > .socials > a {
  color: #595959;
}
[data-mode=light] .header > .description > .socials > a:hover {
  color: #141414;
}
[data-mode=light] main {
  background: #fafafa;
  box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
}
[data-mode=light] main .index > h1 > a {
  color: #1f1f1f;
}
[data-mode=light] main .index > h1 > a:hover {
  color: #595959;
}
[data-mode=light] main .index > p {
  color: #262626;
}
[data-mode=light] main .index > .info {
  border-bottom: 1px solid #f3f3f3;
}
[data-mode=light] main .index > .info .date span,
[data-mode=light] main .index > .info .tag span {
  color: #8c8c8c;
}
[data-mode=light] main .index > .info .date a,
[data-mode=light] main .index > .info .tag a {
  color: #8c8c8c;
}
[data-mode=light] main .index > .info .date i,
[data-mode=light] main .index > .info .tag i {
  color: #8c8c8c;
}
[data-mode=light] main .archives > ul > .year,
[data-mode=light] main .archives > ul .name,
[data-mode=light] main .archives > ul .friend,
[data-mode=light] main .categories > ul > .year,
[data-mode=light] main .categories > ul .name,
[data-mode=light] main .categories > ul .friend,
[data-mode=light] main .category > ul > .year,
[data-mode=light] main .category > ul .name,
[data-mode=light] main .category > ul .friend,
[data-mode=light] main .tag > ul > .year,
[data-mode=light] main .tag > ul .name,
[data-mode=light] main .tag > ul .friend,
[data-mode=light] main .tags > ul > .year,
[data-mode=light] main .tags > ul .name,
[data-mode=light] main .tags > ul .friend,
[data-mode=light] main .links > ul > .year,
[data-mode=light] main .links > ul .name,
[data-mode=light] main .links > ul .friend {
  color: #1f1f1f;
}
[data-mode=light] main .archives > ul > li > a,
[data-mode=light] main .categories > ul > li > a,
[data-mode=light] main .category > ul > li > a,
[data-mode=light] main .tag > ul > li > a,
[data-mode=light] main .tags > ul > li > a,
[data-mode=light] main .links > ul > li > a {
  color: #262626;
}
[data-mode=light] main .archives > ul > li > a:hover,
[data-mode=light] main .categories > ul > li > a:hover,
[data-mode=light] main .category > ul > li > a:hover,
[data-mode=light] main .tag > ul > li > a:hover,
[data-mode=light] main .tags > ul > li > a:hover,
[data-mode=light] main .links > ul > li > a:hover {
  color: #595959;
}
[data-mode=light] main .archives > ul > li > a > span,
[data-mode=light] main .categories > ul > li > a > span,
[data-mode=light] main .category > ul > li > a > span,
[data-mode=light] main .tag > ul > li > a > span,
[data-mode=light] main .tags > ul > li > a > span,
[data-mode=light] main .links > ul > li > a > span {
  color: #8c8c8c;
}
[data-mode=light] main .archives > ul > li > span,
[data-mode=light] main .categories > ul > li > span,
[data-mode=light] main .category > ul > li > span,
[data-mode=light] main .tag > ul > li > span,
[data-mode=light] main .tags > ul > li > span,
[data-mode=light] main .links > ul > li > span {
  color: #8c8c8c;
}
[data-mode=light] main .pagenav a {
  color: #262626;
}
[data-mode=light] main .pagenav a:hover {
  color: #595959;
}
[data-mode=light] main .post > .title > h1 {
  color: #1f1f1f;
}
[data-mode=light] main .post > .title > h1 > a {
  color: #1f1f1f;
}
[data-mode=light] main .post > .title > .info {
  border-bottom: 1px solid #f5f5f5;
}
[data-mode=light] main .post > .title > .info > span {
  color: #8c8c8c;
}
[data-mode=light] main .post > .title > .info > span i {
  color: #8c8c8c;
}
[data-mode=light] main .journals > ul > li > .info {
  color: #8c8c8c;
}
[data-mode=light] footer .copyright a {
  color: #bfbfbf;
}
[data-mode=light] footer .copyright a:hover {
  color: #262626;
}
[data-mode=light] .comment {
  background: #fafafa;
  box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
}
[data-mode=light] .post-bottom-menu {
  border-top: 1px solid #f5f5f5;
}
[data-mode=light] .post-bottom-menu > a {
  color: #262626;
}
[data-mode=light] .post-bottom-menu > a:hover {
  color: #595959;
}

[data-mode=dark] body {
  background-color: #383838;
  color: #b6b6b6;
}
[data-mode=dark] .header > .title > a > span {
  color: #bfbfbf;
}
[data-mode=dark] .header > .title > a > span:hover {
  color: #434343;
}
[data-mode=dark] .header > .description {
  color: #8c8c8c;
}
[data-mode=dark] .header > .description > .socials > a {
  color: #8c8c8c;
}
[data-mode=dark] .header > .description > .socials > a:hover {
  color: #434343;
}
[data-mode=dark] main {
  background: #292929;
  box-shadow: 0 0.375rem 1rem -0.5rem #262626;
}
[data-mode=dark] main .index > h1 > a {
  color: #b8b8b8;
}
[data-mode=dark] main .index > h1 > a:hover {
  color: #434343;
}
[data-mode=dark] main .index > p {
  color: #b6b6b6;
}
[data-mode=dark] main .index > .info {
  border-bottom: 1px solid #434343;
}
[data-mode=dark] main .index > .info .date span,
[data-mode=dark] main .index > .info .tag span {
  color: #8c8c8c;
}
[data-mode=dark] main .index > .info .date a,
[data-mode=dark] main .index > .info .tag a {
  color: #8c8c8c;
}
[data-mode=dark] main .index > .info .date i,
[data-mode=dark] main .index > .info .tag i {
  color: #8c8c8c;
}
[data-mode=dark] main .archives > ul > .year,
[data-mode=dark] main .archives > ul .name,
[data-mode=dark] main .archives > ul .friend,
[data-mode=dark] main .categories > ul > .year,
[data-mode=dark] main .categories > ul .name,
[data-mode=dark] main .categories > ul .friend,
[data-mode=dark] main .category > ul > .year,
[data-mode=dark] main .category > ul .name,
[data-mode=dark] main .category > ul .friend,
[data-mode=dark] main .tag > ul > .year,
[data-mode=dark] main .tag > ul .name,
[data-mode=dark] main .tag > ul .friend,
[data-mode=dark] main .tags > ul > .year,
[data-mode=dark] main .tags > ul .name,
[data-mode=dark] main .tags > ul .friend,
[data-mode=dark] main .links > ul > .year,
[data-mode=dark] main .links > ul .name,
[data-mode=dark] main .links > ul .friend {
  color: #b8b8b8;
}
[data-mode=dark] main .archives > ul > li > a,
[data-mode=dark] main .categories > ul > li > a,
[data-mode=dark] main .category > ul > li > a,
[data-mode=dark] main .tag > ul > li > a,
[data-mode=dark] main .tags > ul > li > a,
[data-mode=dark] main .links > ul > li > a {
  color: #b6b6b6;
}
[data-mode=dark] main .archives > ul > li > a:hover,
[data-mode=dark] main .categories > ul > li > a:hover,
[data-mode=dark] main .category > ul > li > a:hover,
[data-mode=dark] main .tag > ul > li > a:hover,
[data-mode=dark] main .tags > ul > li > a:hover,
[data-mode=dark] main .links > ul > li > a:hover {
  color: #434343;
}
[data-mode=dark] main .archives > ul > li > a > span,
[data-mode=dark] main .categories > ul > li > a > span,
[data-mode=dark] main .category > ul > li > a > span,
[data-mode=dark] main .tag > ul > li > a > span,
[data-mode=dark] main .tags > ul > li > a > span,
[data-mode=dark] main .links > ul > li > a > span {
  color: #8c8c8c;
}
[data-mode=dark] main .archives > ul > li > span,
[data-mode=dark] main .categories > ul > li > span,
[data-mode=dark] main .category > ul > li > span,
[data-mode=dark] main .tag > ul > li > span,
[data-mode=dark] main .tags > ul > li > span,
[data-mode=dark] main .links > ul > li > span {
  color: #8c8c8c;
}
[data-mode=dark] main .pagenav a {
  color: #b6b6b6;
}
[data-mode=dark] main .pagenav a:hover {
  color: #434343;
}
[data-mode=dark] main .post > .title > h1 {
  color: #b8b8b8;
}
[data-mode=dark] main .post > .title > h1 > a {
  color: #b8b8b8;
}
[data-mode=dark] main .post > .title > .info {
  border-bottom: 1px solid #434343;
}
[data-mode=dark] main .post > .title > .info > span {
  color: #8c8c8c;
}
[data-mode=dark] main .post > .title > .info > span i {
  color: #8c8c8c;
}
[data-mode=dark] main .journals > ul > li > .info {
  color: #8c8c8c;
}
[data-mode=dark] footer .copyright a {
  color: #262626;
}
[data-mode=dark] footer .copyright a:hover {
  color: #bfbfbf;
}
[data-mode=dark] .comment {
  background: #292929;
  box-shadow: 0 0.375rem 1rem -0.5rem #262626;
}
[data-mode=dark] .post-bottom-menu {
  border-top: 1px solid #434343;
}
[data-mode=dark] .post-bottom-menu > a {
  color: #b6b6b6;
}
[data-mode=dark] .post-bottom-menu > a:hover {
  color: #434343;
}