$first-screen-font-size = 2rem
$first-screen-icon-size = 1.6rem

$temp-img = hexo-config('style.first_screen.background_img')
$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'

$temp-font-color = hexo-config('style.first_screen.font_color')
$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color)

.first-screen-container {
  position relative
  box-sizing border-box
  width 100%
  overflow hidden
  background url($first-screen-img) center center / cover no-repeat

  if (!(hexo-config('style.first_screen.header_transparent') == true)) {
    background-position-y $header-height
  }

  +keep-tablet() {
    background-position-y $header-height * 0.9
  }

  +keep-mobile() {
    background-position-y $header-height * 0.8
  }

  .content {
    position relative
    box-sizing border-box
    width 80%
    height 90%
    padding-top 2rem

    .description {
      color $first-screen-font-color
      font-weight bold
      font-size $first-screen-font-size
      line-height 1.8
      text-align center

      +keep-tablet() {
        font-size $first-screen-font-size * 0.9
      }
    }


    .s-icon-list {
      position absolute
      bottom 0
      display flex
      box-sizing border-box
      font-size $first-screen-icon-size

      +keep-tablet() {
        font-size $first-screen-icon-size * 0.9
      }

      .s-icon-item {
        margin 0 1rem
        cursor pointer
      }
    }
  }
}