#recent-posts
  width: 75%

  .recent-post-item 
    padding: 0
    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
    border-radius: 8px
    transition: all 0.3s
    background: #fff
    margin-top: 20px
    height: 280px

    &:hover 
      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)

      img.post_bg
        transform:scale(1.1)
  
  .is_left
    float: left
    border-top-left-radius: 8px
    border-bottom-left-radius: 8px

  .is_right
    float: right
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px

  .post_cover
    width: 45%
    height: 280px
    overflow: hidden

  img.post_bg
    border: 0
    transition: all .6s
    display: block
    width: 100%
    height: 100%
    padding: 0
    margin: 0
    object-fit: cover

    &:hover
      transform:scale(1.1)
  
  #pagination
    margin-top: 2rem
  
  .recent-post-info 
    padding: 50px 40px
    display: inline-block
    width: 55%
    overflow hidden


  a.article-meta__categories
    text-decoration: none
    color: #858585

    &:hover
      color: #49b1f5 !important

  .content
    display: -webkit-box
    -webkit-line-clamp: 3
    -webkit-box-orient: vertical
    overflow: hidden
    height: 90px

.layout_page
  display: flex 
  margin: 0 auto
  max-width: 1200px
  align-items: flex-start
  padding: 0 15px


#page,.category-content,.flink
  padding: 40px 44px 44px

#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
  border-radius: 8px
  transition: all .3s
  background: #fff
  margin-top: 20px
  width: 75%

.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink

  &:hover 
    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)



@media screen and (min-width: 900px) 
  if hexo-config("aside.position") == "left"
    #recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      order: 2

@media screen and (max-width: 900px) 
  #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
      width: 100% !important


@media screen and (max-width:768px)
  #web_bg
    display: none 
    
  .recent-post-item
    height: auto !important
    border-radius: 8px

  .post_cover 
    width: 100% !important
    height: 230px !important
    border-radius: 8px !important
           
  .recent-post-item,#page,.tag-cloud,.flink
    margin-top: 1px

  .recent-post-item,#page,.category-content,.tag-cloud,.flink
    box-shadow: none !important
    background: none !important
    padding: 0px 20px 0 !important
  
    &:hover 
      -webkit-box-shadow: none
      box-shadow: none
  
  #archive,#category,#tag
    box-shadow: none !important
    background: none !important
    padding: 0px 30px 0 !important

  
  .layout_post
    padding: 0 20px 0
    border-radius: 0
    -webkit-box-shadow: none
    box-shadow: none
    background: none
    margin: 0

    &:hover
      -webkit-box-shadow: none
      box-shadow: none
      
  .layout_page
    padding: 0 !important
  
  #aside_content
    display: none !important

  .category-lists
    padding: 0
  
  #recent-posts
    .recent-post-info 
      padding: 20px 10px !important
      width: 100%

    #pagination
      margin-bottom: 0

  #nav 
    #site-social-icons
      display: block

    &.not_index_bg
      height: 14rem

    #page_site-info
      top: 7rem
  
  #top-container
    height: 14rem

    #post-info
      bottom: 1rem
      padding-left: 5%
  
  .mobile_hidden
    display: none
  
    
  canvas
    display: none !important


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

#nav,
#top-container,
#page-header
  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-in
  animation: rightside_in_animate .3s
  display: block !important

@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 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 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)