@import "../hyperpoint";
@import "../color";
$fontFamily: Noto Sans TC;
$fontColor: $mid-blue;

// General settings:
//    font-size and paragraph spacing for headers and paragraph text
#cfp-intro {
  h1,
  h2,
  h3 {
    margin-bottom: 24pt;
  }

  p {
    line-height: 1.75;
    margin-bottom: 2em;
  }

  h1,
  .h1 {
    font-size: 42pt;
    font-weight: 900;
  }

  h2,
  .h2 {
    font-size: 26pt;
    font-weight: 900;
  }

  h3,
  .h3 {
    font-size: 22pt;
    font-weight: 900;
  }
}

// Utiliy
#cfp-intro {
  .mr-2 {
    margin-right: 2em;
  }
  .ml-2 {
    margin-left: 2em;
  }
  .mt-1 {
    margin-top: 1em;
  }
}

#cfp-intro {
  padding-top: 72px;
  padding-bottom: 72px;
  padding-left: 135px;
  color: $fontColor;

  .box-back {
    padding-top: 180px;
    padding-bottom: 180px;
    width: 800px;

    .about-sitcon {
      // empty
    }

    .past-sitcon {
      .cfp-img {
        width: 180px; //225
        height: 121px; //152
      }

      .thumbnails {
        display: flex;
        flex-direction: row;
        padding: 0.25em 0;
        margin-bottom: 2em;

        .thumb-wrapper {
          .thumb-title,
          .thumb-subtitle {
            margin: 0;
            font-size: 0.8em;
            line-height: 1.75em;
            font-weight: 900;
          }

          .small {
            font-size: 0.6em;
          }

          &:not(:last-child) {
            margin-right: 2em;
          }
        }
      }
    }

    .join-discuss {
      // empty
    }
  }

  .box-back2 {
    width: 1050px;
    padding-top: 180px;

    .about-topic {
     // empty
    }

    .cfp-deadline {
       margin-bottom: 2.5em;

      .cfp-deadline-content {
        margin-top: -1.5em;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
      }
    }

    .give-me-money {
      .whisper {
        font-weight: 900;
        font-size: 1.25em;
        margin-bottom: 0.5em;
      }
    }
  }
}

@include md {
  //for width 786px
  #cfp-intro {
    h1,
    h2,
    h3 {
      margin-bottom: 12pt;
    }

    p {
      font-size: 14pt;
      line-height: 1.75;
      width: 85vw;
    }

    p:not(:last-child) {
      margin-bottom: 2em;
    }
  }
  #cfp-intro {
    .box-back {
      margin-bottom: -42em;
      margin-left: -6em;

      .first-box {
        transform: rotate(12deg) scale(1.2);
        bottom: 520px;
        left: 100px;
      }

      .introd-text {
        top: 120px;
      }

      .past-sitcon {
        .thumbnails {
          .thumb-wrapper {
            width: 200.5px; //25vw;
            .thumb-title,
            .thumb-subtitle {
              width: 185.5px; //25vw;
            }
          }
        }
      }
    }
  }

  #cfp-intro {
    .box-bluearea {
      height: 200px;
      z-index: 0;
      transform: rotate(12deg);
    }
  }

  #cfp-intro {
    .box-back2 {
      margin-top: 1em;
      margin-left: -2em;

      .second-box {
        transform: rotate(12deg);
        bottom: 1030px;
        left: -5em;
      }
    }
  }

  #cfp-intro {
    //button util
    .mr-2 {
      margin-right: 0.5em;
    }
    .ml-2 {
      margin-left: 0.5em;
    }
    .mt-1 {
      margin-top: 1em;
    }
  }
}

@include sm {
  //for width 600px

  #cfp-intro {
    h1,
    h2,
    h3 {
      margin-bottom: 15pt;
    }

    p {
      font-size: 13pt;
      line-height: 1.5;
      width: 70vw;
    }

    p:not(:last-child) {
      margin-bottom: 2em;
    }
  }

  #cfp-intro {
    .box-back {
      margin-bottom: -45em;
      margin-left: -5em;

      .first-box {
        transform: rotate(12deg) scale(1.1);
        bottom: 610px;
        left: 50px;
      }
      .introd-text {
        top: 5em;
      }

      .past-sitcon {
        margin-bottom: -1em;
        .thumbnails {
          .thumb-wrapper {
            width: 122.5px; //25vw;
            .thumb-title,
            .thumb-subtitle {
              width: 132.5px; //25vw;
            }
          }
        }

        .cfp-img {
          width: 128.5px; //225
          height: 80px; //152
          margin-left: 0em;
        }
      }
    }
  }

  #cfp-intro {
    .box-bluearea {
      height: 300px;
      z-index: 0;
      transform: rotate(12deg);
    }
  }

  #cfp-intro {
    .box-back2 {
      margin-top: -6em;
      .second-box {
        transform: rotate(12deg);
        bottom: 1060px;
      }
    }
  }

  #cfp-intro {
    //button util
    .mr-2 {
      margin-right: 0.5em;
    }
    .ml-2 {
      margin-left: 0.5em;
    }
    .mt-1 {
      margin-top: 1em;
    }
  }
}

@include ss {
  #cfp-intro {
    h1,
    h2,
    h3 {
      margin-bottom: 10pt;
    }

    h1,
    .h1 {
      font-size: 36pt;
      font-weight: 900;
    }

    h2,
    .h2 {
      font-size: 20pt;
      font-weight: 900;
    }

    h3,
    .h3 {
      font-size: 18pt;
      font-weight: 900;
    }

    p {
      font-size: 12pt;
      line-height: 1.65;
      width: 80vw;
    }

    p:not(:last-child) {
      margin-bottom: 2em;
    }
  }

  #cfp-intro {
    .box-back {
      margin-bottom: -45em;
      margin-left: -7em;

      .first-box {
        transform: rotate(12deg);
        bottom: 640px;
        left: 30px;
      }
      .introd-text {
        top: 100px;
      }
      .past-sitcon {
        margin-top: 1em;
      }
      .past-sitcon {
        .thumbnails {
          .thumb-wrapper {
            width: 122.5px; //25vw;
            .thumb-title,
            .thumb-subtitle {
              width: 132.5px; //25vw;
            }
          }
        }

        .cfp-img {
          width: 128.5px; //225
          height: 80px; //152
          margin-left: 0em;
        }
      }
    }
  }

  #cfp-intro {
    .box-bluearea {
      height: 280px;
      z-index: 0;
      transform: rotate(12deg);
    }
  }

  #cfp-intro {
    .box-back2 {
      margin-top: -5em;
      margin-left: -1em;

      .second-box {
        transform: rotate(12deg) scale(0.65);
        bottom: 1270px;
        left: -14em;
      }
    }

    .give-me-money {
      top: 2em;
      .whisper {
        font-weight: 900;
        font-size: 1.25em;
        margin-bottom: 0.5em;
      }
    }
  }

  #cfp-intro {
    .past-sitcon {
      margin-bottom: 2em;
      width: 40vw;
      height: 10em;

      .thumbnails {
        display: flex;
        flex-direction: row;
        padding: 0.25em 0;

        .thumb-wrapper {
          width: 225px; //25vw;
          .thumb-title,
          .thumb-subtitle {
            width: 190px; //25vw;
            text-align: center;
            margin: 0;
            font-size: 0.8em;
            line-height: 1.75em;
            font-weight: 900;
          }

          .small {
            font-size: 0.6em;
          }

          &:not(:last-child) {
            margin-right: 1em;
          }
        }
      }
    }
  }
}

@include xs {
  #cfp-intro {
    h1,
    h2,
    h3 {
      margin-bottom: 10pt;
    }

    h1,
    .h1 {
      font-size: 36pt;
      font-weight: 900;
    }

    h2,
    .h2 {
      font-size: 20pt;
      font-weight: 900;
    }

    h3,
    .h3 {
      font-size: 18pt;
      font-weight: 900;
    }

    p {
      font-size: 11pt;
      line-height: 1.65;
      width: 80vw;
    }

    p:not(:last-child) {
      margin-bottom: 2em;
    }
  }

  #cfp-intro {
    .box-back {
      margin-bottom: -45em;
      margin-left: -8em;

      .first-box {
        transform: rotate(12deg);
        bottom: 620px;
        left: 30px;
      }
      .introd-text {
        top: 100px;
      }
      .past-sitcon {
        margin-top: 1em;

        .thumbnails {
          margin-left: -0.5em;
          padding: 0.25em 0;

          .thumb-wrapper {
            width: 110px; //25vw;
            .thumb-title,
            .thumb-subtitle {
              width: 130px; //25vw;
              text-align: center;
              margin: 0;
              font-size: 0.1em;
              line-height: 10em;
              font-weight: 900;
            }
            .cfp-img {
              width: 110.5px; //225
              height: 63px; //152
              margin-left: 0.6em;
            }
          }
        }
      }
    }
  }

  #cfp-intro {
    .box-bluearea {
      height: 220px;
      z-index: 0;
      transform: rotate(12deg);
    }
  }

  #cfp-intro {
    .box-back2 {
      margin-top: 3em;
      margin-left: -1em;

      .second-box {
        transform: rotate(12deg) scale(0.63);
        bottom: 1250px;
        left: -15em;
      }
    }

    .give-me-money {
      top: 2em;
      .whisper {
        font-weight: 900;
        font-size: 1.25em;
        margin-bottom: 0.5em;
      }
    }
  }
}