html
  height: 100%
  font-size: $rem

body
  position: relative
  min-height: 100%
  background: var(--global-bg)
  color: var(--font-color)
  font-size: $font-size
  font-family: $font-family
  line-height: $text-line-height
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  if !hexo-config('copy.enable')
    user-select: none

*::-webkit-scrollbar
  width: 8px
  height: 8px

*::-webkit-scrollbar-thumb
  background: var(--btn-bg)

*::-webkit-scrollbar-track
  background-color: transparent

input::placeholder
  color: var(--font-color)

#web_bg
  position: fixed
  z-index: -999
  width: 100%
  height: 100%
  background: $web-bg
  background-attachment: local
  background-position: center
  background-size: cover
  background-repeat: no-repeat

h1,
h2,
h3,
h4,
h5,
h6
  position: relative
  margin: 1rem 0 .7rem
  color: var(--text-highlight-color)
  font-weight: bold

  code
    font-size: inherit !important

*
  box-sizing: border-box

hr
  position: relative
  margin: 2rem auto
  border: 2px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)

    &:hover
      &:before
        left: calc(95% - 20px)

    &:before
      position: absolute
      top: $hr-icon-top
      left: 5%
      z-index: 1
      color: var(--hr-before-color)
      content: $hr-icon
      font-size: 20px
      line-height: 1
      transition: all 1s ease-in-out
      @extend .fontawesomeIcon

.table-wrap
  overflow-x: scroll
  margin: 0 0 1rem

table
  display: table
  width: 100%
  border-spacing: 0
  border-collapse: collapse
  empty-cells: show

  thead
    background: alpha($table-thead-bg, 10%)

  th,
  td
    padding: .3rem .6rem
    border: 1px solid var(--light-grey)
    vertical-align: middle

*::selection
  background: $theme-text-selection-color
  color: #F7F7F7

button
  padding: 0
  outline: 0
  border: none
  background: none
  cursor: pointer

// font
#page-header #site_title,
#page-header #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
  font-family: $site-name-font

.is-right
  text-align: right

.is-left
  text-align: left

.is-center
  text-align: center

.is_visible
  display: block !important

.is-visible-inline
  display: inline-block !important

.is-invisible
  display: none !important

.is-hidden
  overflow: hidden

.copy-true
  user-select: all

.pull-left
  float: left

.pull-right
  float: right

.button--animated
  position: relative
  z-index: 1
  transition: color 1s

  &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1
    background: var(--btn-hover-color)
    content: ''
    transition: transform .5s ease-out
    transform: scaleX(0)
    transform-origin: 0 50%

  &:hover
    &:before
      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
      transform: scaleX(1)

img[src=''],
img:not([src])
  opacity: 0

.img-alt
  margin: -.5rem 0 .5rem
  color: #858585

  &:hover
    text-decoration: none !important

.post-ad
  margin: 2rem 0

.ad_height
  display: block !important
  height: auto !important

// animation
#content-inner,
#footer
  animation: main 1s

#page-header
  animation: header-effect 1s

#site_title,
#site_subtitle
  animation: titlescale 1s

canvas:not(#ribbon-canvas),
#web_bg
  animation: to_show 4s

#ribbon-canvas
  animation: ribbon_to_show 4s

.card-announcement-animation
  color: #FF0000
  animation: announ_animation .8s linear infinite

.scroll-down-effects
  animation: scroll-down-effect 1.5s infinite

if hexo-config('avatar.effect') == true
  .avatar-img
    animation: avatar_turn_around 2s linear infinite

.reward-main
  animation: donate_effcet .3s .1s ease both

.tocOpenPc
  .sidebar-toc__title
    animation: tocsidebarLtoR .5s

  .sidebar-toc__progress
    animation: tocsidebarLtoR .7s

  .sidebar-toc__content
    animation: tocsidebarLtoR .9s

.tocOpenMobile
  .sidebar-toc__title
    animation: tocsidebarRtoL .4s

  .sidebar-toc__progress
    animation: tocsidebarRtoL .6s

  .sidebar-toc__content
    animation: tocsidebarRtoL .7s

#mobile-sidebar-menus
  &.open
    transform: translate3d(-100%, 0, 0)

    for i in 1 2 3 4
      > :nth-child({i})
        animation: sidebarItem (i / 5)s

@keyframes scroll-down-effect
  0%
    top: 0
    opacity: .4

  50%
    top: -16px
    opacity: 1

  100%
    top: 0
    opacity: .4

@keyframes header-effect
  0%
    opacity: 0
    transform: translateY(-50px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes headerNoOpacity
  0%
    transform: translateY(-50px)

  100%
    transform: translateY(0)

@keyframes main
  0%
    opacity: 0
    transform: translateY(50px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes titlescale
  0%
    opacity: 0
    transform: scale(.7)

  100%
    opacity: 1
    transform: scale(1)

@keyframes search_close
  0%
    opacity: 1
    transform: scale(1)

  100%
    opacity: 0
    transform: scale(.7)

@keyframes to_show
  0%
    opacity: 0

  100%
    opacity: 1

@keyframes ribbon_to_show
  0%
    opacity: 0

  100%
    opacity: hexo-config('canvas_ribbon.alpha')

@keyframes avatar_turn_around
  from
    transform: rotate(0)

  to
    transform: rotate(360deg)

@keyframes sub_menus
  0%
    opacity: 0
    transform: translateY(10px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes donate_effcet
  0%
    opacity: 0
    transform: translateY(-20px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes announ_animation
  0%,
  to
    transform: scale(1)

  50%
    transform: scale(1.2)

@keyframes sidebarItem
  0%
    transform: translateX(200px)

  100%
    transform: translateX(0)

@keyframes tocsidebarRtoL
  0%
    transform: translateX(200px)

  100%
    transform: translateX(0)

@keyframes tocsidebarLtoR
  0%
    transform: translateX(-200px)

  100%
    transform: translateX(0)