@font-face {
  font-family: "Extime-Bold";
  src: url("./font/Extime-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Extime-Regular";
  src: url("./font/Extime-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Extime-Light";
  src: url("./font/Extime-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Extime-Thin";
  src: url("./font/Extime-Thin.ttf") format("truetype");
  font-weight: 100;
}

html {
  --dark-bg-color: #014650;
  --middle-bg-color: #085759;
  --light-bg-color: #40e19b;
  --text-color-main: #0e3c39;
  --text-color-light: #fff;
  --text-color-highlight: #40e19b;
  --text-color-dark-1: #01454f;
  --text-color-dark-2: #1b454f;
  --max-width: 1180px;
  --border-radius: 14px;

  /*
  only informative - not usable in media queries declaration
  --breakpoint-xsmall: 380px;
  --breakpoint-small: 480px;
  --breakpoint-medium: 760px;
  --breakpoint-large: 1024px; 
  --breakpoint-xlarge: 1280px;
  */

  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Extime-Regular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    background-color: var(--dark-bg-color);
    @media screen and (min-width: 480px) {
      background-color: var(--middle-bg-color);
    }
    .desktop-only {
      display: none;
      @media screen and (min-width: 768px) {
        display: inline;
      }
    }
    .content-section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 30px 20px;
      @media screen and (min-width: 380px) {
        padding: 30px;
      }
      @media screen and (min-width: 1280px) {
        padding: 45px 20px;
      }
      @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/970) {
        padding: 45px 20px;
      }
      @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/768) {
        padding: 40px 20px;
      }
    }
    p {
      margin: 0;
    }
    sup {
      font-size: 0.5em;
    }
    .button {
      background-color: var(--light-bg-color);
      color: var(--text-color-main);
      text-transform: uppercase;
      font-size: 1.25rem; /* 20px */
      font-size: clamp(1rem, -0.875rem + 5.333vw, 1.25rem);
      font-family: "Extime-Bold", sans-serif;
      font-weight: 700;
      padding: 16px 25px;
      text-decoration: none;
      line-height: 1.1;
      display: inline-block;
      transition: all 0.25s ease;
      &:hover {
        transform: scale(1.02);
        /* filter: saturate(120%); */
        filter: contrast(105%);
      }
    }

    .main-header {
      margin: 0;
      height: 190px;
      background-color: var(--dark-bg-color);
      position: relative;
      h1,
      h2 {
        margin: 0;
      }
      @media screen and (min-width: 1280px) {
        &:before {
          content: "";
          display: block;
          /* width: 28%;
          padding: 0 0 15% 0; */
          height: 220px;
          padding: 0 0 0 28%;
          background: url(./images/extime-side-visual-1.png) no-repeat center
            bottom / cover;
          position: absolute;
          right: 8%;
          top: 0;
        }
      }

      @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/970) {
        height: 190px;
        &:before {
          height: 220px;
        }
      }
      @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/768) {
        height: 160px;
        &:before {
          height: 190px;
        }
      }
      .main-logo-wrapper {
        position: absolute;
        top: 49.8%;
        left: 0;
        transform: translateY(-50%);
        width: 20%;
        min-width: 100px;
        @media screen and (min-width: 480px) {
        }
        @media screen and (min-width: 760px) {
          width: 158px;
        }
        @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/970) {
          width: 158px;
        }
        @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/768) {
          width: 148px;
        }
        img {
          width: 100%;
          height: auto;
        }
      }
      .main-title {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22%;
        @media screen and (min-width: 760px) {
          width: 168px;
        }
        @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
          width: 168px;
        }
        @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
          width: 130px;
        }
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .main-main {
      flex: 1;
      background: url("./images/extime-main-bg.png") no-repeat center top /
        cover;
      &:not(.error-main) {
        margin-top: 180px;
        position: relative;
        @media screen and (min-width: 480px) {
          margin-top: 0;
          position: static;
        }
        &:before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          box-shadow: inset 0px -21px 11px 21px rgb(1, 70, 80);
          opacity: 0.7;
          @media screen and (min-width: 480px) {
            display: none;
          }
        }
      }
      .reward-container {
        background-color: var(--dark-bg-color);
        border: 6px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--border-radius);
        padding: 6% 8% 30px 8%;
        max-width: 847px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 18px;

        margin-top: -220px;
        margin-bottom: 30px;
        position: relative;
        @media screen and (min-width: 480px) {
          margin-top: 0;
          position: static;
        }
        @media screen and (min-width: 760px) {
          padding: 64px 10% 2.5% 10%;
        }
        @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
          padding-top: 64px;
        }
        @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
          padding-top: 25px;
        }
        @media screen and (min-width: 1024px) {
          border: 3px solid rgba(0, 0, 0, 0.1);
        }

        .content-header,
        .content-main,
        .content-footer {
          max-width: 580px;
          margin: 0 auto;
        }
        .content-header {
          text-align: center;
          color: var(--text-color-light);
          display: flex;
          flex-direction: column;
          gap: 16px;
          @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
            gap: 16px;
          }
          @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
            gap: 10px;
          }
          .period {
            font-size: 1rem; /*16px*/
            @media screen and (min-width: 480px) {
              font-size: 1.25rem; /*20px*/
            }
            margin: 0 0 12px 0;
            @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
              margin: 0 0 12px 0;
            }
            @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
              margin: 0;
            }
          }
          .reward-title {
            font-family: "Extime-Bold", sans-serif;
            font-weight: 700;
            font-size: 1.75rem; /*28px*/
            font-size: clamp(1.25rem, -0.875rem + 6.333vw, 1.75rem);
            margin: 0;
            span {
              display: block;
              color: var(--text-color-highlight);
            }
            @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/970) {
              line-height: 1.4;
            }
            @media screen and (min-width: 1280px) and (min-aspect-ratio: 1366/768) {
              line-height: 1.2;
            }
          }
          .description {
            font-family: "Extime-Light", sans-serif;
            font-weight: 300;
            font-size: 1.125rem; /*18px*/
            line-height: 1.6;
            span {
              display: block;
              font-family: "Extime-Bold", sans-serif;
              font-weight: 700;
            }
          }
        }
        .content-main {
          background-color: var(--light-bg-color);
          border-radius: var(--border-radius);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .img-wrapper {
            padding-bottom: 80%;
            background-image: url(./images/extime-side-visual-2.jpg);
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: cover;
            @media screen and (min-width: 768px) {
              background-position: center center;
              padding-bottom: 58%;
            }
          }
          .text-container {
            padding: 22px 38px;
            text-align: center;
            .reward-description-title {
              font-family: "Extime-Bold", sans-serif;
              font-weight: 700;
              font-size: 1.875rem; /*30px*/
              font-size: clamp(1.25rem, -0.875rem + 5.333vw, 1.875rem);
              color: var(--text-color-dark-1);
              line-height: 1.2;
              margin: 0 0 13px 0;
            }
            p {
              font-family: "Extime-Bold", sans-serif;
              font-weight: 700;
              font-size: 0.75rem; /*12px*/
              line-height: 1.6;
              span {
                font-family: "Extime-Light", sans-serif;
                font-weight: 300;
              }
            }
          }
          @media screen and (min-width: 760px) {
            flex-direction: row;
            .text-container {
              padding: 22px 22px 22px 38px;
              flex-basis: 55%;
              text-align: left;
            }
            .img-wrapper {
              padding: 0 0 47% 0;
              flex-basis: 45%;
            }
          }
          @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
            .img-wrapper {
              padding: 0 0 47% 0;
            }
          }
          @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
            .img-wrapper {
              padding: 0 0 40% 0;
            }
          }
        }
        .content-footer {
          text-align: center;
          .button {
            margin: 20px 0 0 0;
            @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/970) {
              margin: 20px 0 0 0;
            }
            @media screen and (min-width: 760px) and (min-aspect-ratio: 1366/768) {
              margin: 5px 0 0 0;
            }
          }
        }
      }
      &.error-main {
        display: flex;
        .content-section {
          flex-grow: 1;
          display: flex;
          align-items: center;
          .reward-container {
            padding: 5%;
            max-width: 600px;
            .description {
              font-family: "Extime-Light", sans-serif;
              font-weight: 300;
              font-size: 1.25rem; /*18px*/
              line-height: 1.6;
              color: var(--text-color-light);
              text-align: center;
            }
          }
        }
      }
    }
    .main-footer {
      background-color: var(--dark-bg-color);
      color: rgba(255, 255, 255, 0.9);
      .footer-section {
        padding: 40px;
      }
      .legal-notice {
        font-size: 0.75rem;
        a {
          color: rgba(255, 255, 255, 0.9);
        }
        ul {
          list-style-type: none;
          padding: 0;
        }
        p,
        ul {
          margin: 0 0 12px 0;
        }
        .politics {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }
        ul:not(.politics) {
          li {
            padding: 0 0 0 12px;
            position: relative;
            &:before {
              content: "\2022";
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
      }
    }
  }
}