@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 {
  margin-top: 90px;

  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;
  }
}
.introduction {
  height: 2400px;
  overflow: hidden;
  padding-bottom: 0;
}
@media screen and (max-width: 1021px) {
  .introduction {
    height: 2230px;
  }
}
@media screen and (max-width: 891px) {
  .introduction {
    height: 2400px;
  }
}


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

#cfp-intro {

  .box-back {
    // width: 880px;
    margin-bottom: -40em;
    font-family: $fontFamily;
    color: $fontColor;

    width: 700px;
    padding: 20px;

    .first-box {
      transform: rotate(15deg);
      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
      border-radius: 30px;
      position: relative;
      bottom: 620px;
      right: 50px;
      z-index: 0;
    }
    .introd-text {
      position: relative;
      top: 200px;
      left: 150px;
      z-index: 2;
    }
    .about-sitcon {
      margin-bottom: 0 auto 2em;
    }

    .past-sitcon {
      margin-bottom: 2em;
      width: 60vw;
      height: 13em;

      .cfp-img{
        width: 180px; //225
        height: 121px; //152
      }
      .thumb-link {
        color: $mid-blue;
        &:visited {
          p {
            color: $mid-blue;
          }
        }
      }
      .thumbnails {
        display: flex;
        flex-direction: row;
        padding: 0.25em 0;

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

          .small {
            font-size: 0.6em;
          }

          &:not(:last-child) {
            margin-right: 1em;
          }
        }
      }
    }
    
    .join-discuss {
      // empty
    }
  }

  .box-bluearea {
    width: 150vw;
    height: 450px;
    background: rgba(34, 107, 180, 1);
    right: 25%;
    position: relative;
    z-index: -1;
    transform: rotate(15deg);
    opacity: 1;
  }

  .box-back2 {
    // width: 760px;
    font-family: $fontFamily;
    color: $fontColor;

    width: 900px;
    padding: 20px 20px 168px 20px;
    height: 2350px;

    .about-topic {
      margin-bottom: 2em;
      position: relative;
      bottom: 75px;
      z-index: 2;
      left: 50px;
    }

    .second-box {
      transform: rotate(15deg);
      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
      border-radius: 30px;
      position: relative;
      bottom: 1100px;
      right: 120px;
      z-index: 0;
    }

    .cfp-deadline {
      margin-bottom: 2em;
      margin-bottom: 2em;
      position: relative;
      z-index: 2;
      left: 50px;
      bottom: 75px;
      .cfp-deadline-content {
        margin-top: -1.5em;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
      }
    }
    
    .give-me-money {
      position: relative;
      z-index: 2;
      left: 50px;
      bottom: 75px;
      .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: 590px;
        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;
    }

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

  #cfp-intro{
    .box-back {
      margin-bottom: -45em;
      margin-left: -8em; //40
  
      .first-box {
        transform: rotate(12deg);
        bottom: 600px; //625
        left: 12vw;
      }
      .introd-text {
        top: 100px;
      }
      .past-sitcon {
        margin-top:1em;
        margin-bottom:-3em;
        .thumbnails {
          margin-left: -0.5em;
          padding: 0.25em 0;
  
          .thumb-wrapper {
            width:90px;//25vw;
            .thumb-title,
            .thumb-subtitle {
              width:115px; //25vw;
              text-align: center;
              margin: 0;
              font-size: 0.1em;
              line-height: 15em;
              font-weight: 900;
            }
            .thumb-subtitle{
              display: none;
            }
            .small {
              font-size: 0.1em;
            }
            .cfp-img{
              width: 95.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: 0em;
      margin-left: -2em;
  
      .second-box {
          transform: rotate(12deg) scale(0.63);
          bottom: 1270px;
          left:-15em;
      }
    }
    
    .give-me-money {
      top: 2em;
      .whisper {
        font-weight: 900;
        font-size: 1.25em;
        margin-bottom: 0.5em;
      }
    }
  }
}