$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;
  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%;

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

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


    .s-icon-list {
      position: absolute;
      bottom: 0;
      font-size: $first-screen-icon-size;
      text-align: center;

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

      .s-icon-item {
        margin-right: 20px;
        cursor: pointer;
        line-height: 2;

        &:last-child {
          margin-right: 0;
        }

      }

    }
  }
}