:root
  --color-site-body: $color-site-bg
  --color-site-bg: $color-site-bg
  --color-site-inner: $color-site-inner
  --color-site-footer: $color-site-footer
  --color-card: $color-card
  --color-text: $color-text
  --color-block: $color-block
  --color-inlinecode: $color-inlinecode
  --color-codeblock: $color-codeblock
  --color-h1: $color-h1
  --color-h2: $color-h2
  --color-h3: $color-h3
  --color-h4: $color-h4
  --color-h5: $color-h5
  --color-h6: $color-h6
  --color-p: $color-p
  --color-list: $color-list
  --color-list-hl: $color-list-hl
  --color-meta: $color-meta
  --color-read-bkg: $color-read-bkg
  --color-read-post: $color-read-post
  --color-copyright-bkg: $color-copyright-bkg

*
  box-sizing: border-box
  outline: none
  margin: 0
  padding: 0
  scrollbar()

html
  color: var(--color-text)
  width: 100%
  height: 100%
  font-family: $fontfamily
  font-size: $fontsize-root
  >
    if hexo-config('custom_css.scrollbar.size')
      scrollbar(convert(hexo-config('custom_css.scrollbar.size')), convert(hexo-config('custom_css.scrollbar.border')) || 0px)

body
  background-color: var(--color-site-body)
  text-rendering: optimizelegibility
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  line-height: $lineheight
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  &.modal-active
    overflow: hidden
    @media screen and (max-width: $modal-threshold)
      position: fixed
      top: 0
      right: 0
      bottom: 0
      left: 0

a
  color: $color-link
  cursor: pointer
  text-decoration: none
  trans()
  &:hover
    color: $color-hover
  &:active,&:hover
    outline: 0

ul,ol
  padding-left: 0
  li
    list-style: none

header
  display: block

img
  border: 0
  background: none
  max-width: 100%

svg:not(:root)
  overflow: hidden

hr
  -moz-box-sizing: content-box
  box-sizing: content-box
  height: 0
  border: 0
  border-radius: 1px
  border-bottom: 1px solid alpha($color-text, .1)

button,input
  color: inherit
  font: inherit
  margin: 0

button
  overflow: visible
  text-transform: none
  -webkit-appearance: button
  cursor: pointer


.blur
  @supports (backdrop-filter: blur(20px))
    background: alpha($color-card, .9) !important
    backdrop-filter: saturate(200%) blur(20px)

if hexo-config('comments.service')=='discuss' || hexo-config('comments.service')=='twikoo' || hexo-config('comments.service')=='waline'
  .blur#comments
    @supports (backdrop-filter: blur(20px))
      backdrop-filter: unset
  #layoutHelper-comments
    margin-bottom: 100px

.shadow
  box-shadow: $boxshadow-card
  &.floatable
    trans()
    &:hover
      box-shadow: $boxshadow-card-float