@import url(github-markdown.css);
@import url(../font/iconfont.css);
html {
  color: #333;
  background: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  padding: 0;
  font: 400 1em/1.8 -apple-system, BlinkMacSystemFont, Segoe UI, Microsoft Yahei, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
html {
  background-color: var(--body-bg-color);
  --body-bg-color: #ffffff;
  --header-bg-color: #ffffff;
  --active-color: #0073ff;
  --search-bg-color: #f5f6f7;
  --aside-hover-bg: rgba(0, 0, 0, 0.05);
  --aside-color: #606770;
  --article-nav-font-color: rgba(63, 63, 65, 0.6);
  --article-nav-font-hover-color: rgba(19, 19, 18, 0.8);
  --article-nav-font-active-color: #131312;
  --simp-block-bg: #f5f6f7;
}
html.dark {
  color: #fff;
  --header-bg-color: #242526;
  --body-bg-color: #1b1b1d;
  --search-bg-color: #282a2a;
  --aside-hover-bg: rgba(255, 255, 255, 0.1);
  --aside-color: #dedede;
  --article-nav-font-color: rgba(235, 235, 245, 0.6);
  --article-nav-font-hover-color: rgba(255, 255, 245, 0.8);
  --article-nav-font-active-color: #fffff5;
  --simp-block-bg: #252a33;
}
body > #loading {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--body-bg-color);
}
body > #loading.fadeout {
  animation: fadeout ease 0.3s;
  animation-fill-mode: forwards;
}
body > #loading:before {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 1s infinite linear;
  content: "";
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.body-important {
  display: none;
}