html
  height: 100%
  font-size: $rem

body
  position: relative
  display: flex
  flex-direction: column
  min-height: 100%
  background: #fff
  color: $font-black
  font-size: $font-size
  font-family: $font-family
  line-height: $text-line-height

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

#body-wrap
  position relative
  flex: 1 auto
  display: flex
  flex-direction: column
  transition: all .3s

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

*::-webkit-scrollbar-thumb
  background: $light-blue

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


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

h1,
h2,
h3,
h4,
h5,
h6
  position: relative
  margin: 0.2rem 0
  color: lighten($font-color, 15%)
  font-weight: bold

  code  
    font-size: inherit !important

#content-outer
  flex: 1 auto

*
  box-sizing: border-box

#content-inner
  .img-alt
    text-decoration: none
    color: $a-link-color

#toggle-sidebar
  position: fixed
  bottom: $sidebar-icon-top
  left: $sidebar-icon-left
  z-index: 100
  font-size: $sidebar-icon-size
  cursor: pointer
  transition: all 0.2s
  opacity: 0

hr
  position: relative
  margin: 2rem auto
  width: calc(100% - 4px)
  border: 2px dashed $pale-blue
  background: $white

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

  &:before
    position: absolute
    top: $hr-icon-top
    left: 5%
    z-index: 1
    color: $light-blue
    content: $hr-icon
    font: normal normal normal 14px / 1 FontAwesome
    font-size: 20px
    transition: all 1s ease-in-out

// collapse/expand beautify
details
  padding: 0.3rem
  border: 2px solid darken($light-grey, 10%)

  summary
    color: $theme-color

// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
  margin: 0.5em
  padding: 0.5em
  border: thin silver solid
  text-align: center

table
  overflow: auto
  width: 100%
  border-spacing: 0
  border-collapse: collapse

  thead
    background: alpha($a-link-color, 10%)

  th,
  td
    padding: 0.3rem 0.6rem
    border: 1px solid darken($light-grey, 10%)
    vertical-align: top

*::selection
  background: $selection
  color: $pale-grey


.full_page #site-title, 
.full_page #site-sub-title, 
#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_invisible
  display: none !important

.is_hidden
  overflow: hidden

.pull_left
  float: left

.pull_right
  float: right

.fireworks
  position: fixed
  z-index: -1
  pointer-events: none


.fireworks
  z-index: 99999

@media screen and (max-width: $bg)
  i#toggle-sidebar,
  #sidebar
    display: none

  body
    padding-left: 0 !important


// 懶加載
.lazyload,
.lazyloading 
	opacity: 0

.lazyloaded 
	opacity: 1
	transition: opacity 0.3s

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

.justified-gallery
  margin: 1rem 0
  
  img 
    opacity 0
  .fancybox 
    width: auto
    text-align: inherit    
  .img-alt
    display: none

.medium-zoom-image--opened
  margin: 0 !important
  z-index: 99999 !important

.medium-zoom-overlay
  z-index: 99999 !important

// hexo tag video
.video-container
  position: relative
  padding-top: 56.25%
  height: 0
  overflow: hidden
  margin-bottom: 0.8rem

  iframe
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    margin-top: 0


.layout_page,
.layout_post,
#footer
  animation: main 1s

#nav,
#top-container
  animation: header 1s

#site-title
  animation: titlescale 1s

canvas,
#web_bg
  animation: to_show 4s

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

.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

#rightside-config-hide
  animation: rightside_in_animate .3s

@keyframes scroll-down-effect
  0%
    opacity: 0.4
    top: 0
  50%
    opacity: 1
    top: -16px
  100%
    opacity: 0.4
    top: 0
    
@keyframes header 
  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(0.7)
  100% 
    opacity: 1
    transform: scale(1)

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

@keyframes to_show
  0%
    opacity: 0
  100%
    opacity: 1
 
@keyframes avatar_turn_around
  from
    transform: rotate(0deg)
  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 rightside_in_animate
  0%    
    transform: translateX(28px)
  100%
    transform: translateX(0)

@keyframes rightside_out_animate
  0%    
    transform: translateX(0)
  100%
    transform: translateX(28px)

@keyframes right_to_left
  0%    
    transform: translateX(100px)
  100%
    transform: translateX(0)