@import "../hyperpoint";
@import "../color";

// 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;

    @include sm {
      font-size: 38pt;
    }
  }

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

  h3,
  .h3 {
    font-size: 22pt;
    font-weight: 900;
    @include sm {
      font-size: 19pt;
    }
  }
}

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

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

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

    .about-sitcon {
      // empty
    }

    .past-sitcon {
      .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;
        margin-bottom: 2em;

        .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: 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 lg {
  #cfp-intro {
    padding-left: 135px;
    padding-right: 135px;
    .box-back2 {
      width: initial;
    }
  }
}

@include md {
  #cfp-intro {
    padding-top: 72px;
    padding-bottom: 144px;
    padding-left: 0px;
    padding-right: 0px;

    .box {
      width: 632px;
      margin: 0 auto;
    }

    .box-back {
      padding-top: 120px;
      padding-bottom: 90px;

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

        .thumbnails {
          .thumb-wrapper {
            &:not(:last-child) {
              margin-right: 1em;
            }
          }
        }
      }
    }

    .box-back2 {
      padding-top: 320px;

      .topic-intro {
        .about-topic {
          h1,
          h2 {
            text-align: right;
          }
        }
        .cfp-deadline {
          .cfp-deadline-content {
            display: initial;
          }
        }
      }

      .give-me-money {
        margin-top: 240px;
      }
    }
  }
}

@media screen and (max-width: 768px)  {
  #cfp-intro {
    .box-back2 {

      .topic-intro {
        .cfp-deadline {
          .cfp-deadline-content {
          }
        }
      }

      .give-me-money {
        margin-top: 200px;
      }
    }
  }
}

@include sm {
  #cfp-intro {
    padding-top: 96px;
    padding-bottom: 60px;
    padding-left: 36px;
    padding-right: 36px;
    font-size: 0.9em;

    .box {
      width: initial;
      margin: 0;
    }

    .box-back {
      padding-top: 0px;
      padding-bottom: 90px;
      // height: 1240px;

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

        .thumbnails {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .thumb-wrapper {
            &:not(:last-child) {
              margin-right: 0;
              margin-bottom: 1em;
            }
          }
        }
      }
    }

    .box-back2 {
      padding-top: 380px;

      .give-me-money {
        margin-top: 140px;
      }
    }
  }
}

@media screen and (max-width: 540px)  {
  #cfp-intro {
    .box-back2 {
      padding-top: 360px;

      .give-me-money {
        margin-top: 180px;
      }
    }
  }
}

@include xs {
  #cfp-intro {
    padding-top: 126px;
    padding-bottom: 60px;
    padding-left: 24px;
    padding-right: 24px;

    .box {
      width: initial;
      margin: 0;
    }

    .box-back {
      padding-top: 0px;
      padding-bottom: 90px;
      // height: 1240px;

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

        .thumbnails {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .thumb-wrapper {
            &:not(:last-child) {
              margin-right: 0;
              margin-bottom: 1em;
            }
          }
        }
      }
    }

    .box-back2 {
      padding-top: 300px;

      .topic-intro {
        .cfp-deadline {
          .cfp-deadline-content {
            display: initial;
          }
        }
      }

      .give-me-money {
        margin-top: 180px;
      }
    }
  }
}

@media screen and (max-width: 360px) {
  #cfp-intro {
    .box-back2 {
      padding-top: 240px;

      .give-me-money {
        margin-top: 180px;
      }
    }
  }
}

/*
@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: 600px; //625
        left: 12vw;
      }
      .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: 15em;
              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;
      }
    }
  }
}
*/
