@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: rgb(96, 103, 112);
  --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: rgba(19, 19, 18, 0.9);
  --article-nav-font-active-color: rgba(19, 19, 18, 1);
  --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: rgb(222, 222, 222);
    --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: rgba(255, 255, 245, 0.9);
    --article-nav-font-active-color: rgba(255, 255, 245, 1);
    --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);
    &.fadeout {
      animation: fadeout ease 0.3s;
      animation-fill-mode: forwards;
    }

    &: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;
}