/* ==============================================
   Global
   ============================================== */

/* Fonts
   ============================================== */

/* Forma DJR Display Regular */
@font-face {
  font-family: 'Forma DJR Display Regular';
  src: url('/fonts/FormaDJRDisplay-Regular.woff2') format('woff2'),
  url('/fonts/FormaDJRDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Forma DJR Micro Regular */
@font-face {
  font-family: 'Forma DJR Micro Regular';
  src: url('/fonts/FormaDJRMicro-Regular.woff2') format('woff2'),
  url('/fonts/FormaDJRMicro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Variables
   ============================================== */

:root {
  --horizontal-padding: 2rem;
}

/* ==============================================
   Cookie Policy
   ============================================== */

.cky-consent-container {
  position: relative !important;
  font-family: 'Forma DJR Micro Regular', sans-serif !important;

  .cky-consent-bar {
    padding: 2.5rem var(--horizontal-padding) !important;
  }

  .cky-policy {
    color: #000000 !important;
  }

  .cky-notice {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
  }

  .cky-btn {
    transition: color ease-out 0.2s, background-color ease-out 0.2s;
    font-size: 1rem !important;
    font-family: 'Forma DJR Micro Regular', sans-serif;
  }

  .cky-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .cky-btn-do-not-sell {
    transition: color ease-out 0.2s, background-color ease-out 0.2s;
    font-size: 1rem !important;
    font-family: 'Forma DJR Micro Regular', sans-serif;
    padding: 6px 12px !important;
    border: 1px solid #000000 !important;
    color: #000000;
    background: transparent;
  }

  .cky-btn-do-not-sell:hover {
    color: #ffffff;
    background-color: #000000;
  }

  .cky-title {
    margin-bottom: 0 !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 576px) {
  .cky-title, .cky-notice-des, .cky-notice-btn-wrapper {
    padding: 0 !important;
  }

  .cky-btn-do-not-sell {
    padding: 6px 12px !important;
    text-wrap: auto;
    white-space: normal !important;
  }
}

@media (max-width: 425px) {
  .cky-title, .cky-notice-des, .cky-notice-btn-wrapper {
    padding: 0 !important;
  }
  .cky-btn-do-not-sell {
    padding: 6px 12px !important;
    text-wrap: auto;
    font-size: 12px !important;
  }
}

/* ==============================================
   Page
   ============================================== */

body {
  font-family: 'Forma DJR Display Regular', sans-serif;
  padding: 0;
  margin: 0;
  background: #ffffff;

  main {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Header
     ============================================== */

  header {
    background: #ffffff;

    .header-wrapper {
      position: relative;
      max-width: 80rem;
      height: 100%;
      margin: 0 auto;
      padding-left: var(--horizontal-padding);
      padding-right: var(--horizontal-padding);
      padding-bottom: 4rem;

      @media (max-width: 50rem) {
        padding-bottom: 1.5rem;
      }
    }

    .header-content {
      padding-top: 4rem;

      @media (max-width: 50rem) {
        padding-top: 1.5rem;
      }

      .hp-logo {
        margin-bottom: 2rem;

        @media (max-width: 70rem) {
          width: 2.5rem;
          height: 2.5rem;
        }
      }

      h1 {
        font-size: 1.875rem;
        margin-bottom: 0.5rem;
        transition: font-size 0.2s ease-in-out;

        @media (max-width: 70rem) {
          font-size: 1.25rem;
        }
      }

      .subheader {
        font-size: 3.75rem;
        line-height: 100%;
        margin: 0;
        transition: font-size 0.2s ease-in-out;

        @media (max-width: 70rem) {
          font-size: 2.5rem;
          line-height: 90%;
        }
      }
    }

    .hp-accents {
      width: 100%;
      height: 100%;
      background: url("/assets/accents.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 28rem;
      position: absolute;
      top: 0;
      right: 0;
      transition: background-size 0.2s ease-in-out;

      @media (max-width: 70rem) {
        background-size: 22rem;
      }

      @media (max-width: 55rem) {
        background-size: 16rem;
      }

      @media (max-width: 50rem) {
        background: url("/assets/accents-mobile.png");
        background-repeat: no-repeat;
        background-position: right 1rem top;
        background-size: 8.5rem;
      }
    }
  }


  /* Footer
   ============================================== */

  footer {
    background-color: #000000;
    font-family: 'Forma DJR Micro Regular', sans-serif;
    font-size: 0.875rem;

    .footer-wrapper {
      max-width: 80rem;
      margin: 0 auto;
      padding: 3.5rem var(--horizontal-padding);
      color: #ffffff;

      @media (max-width: 50rem) {
        padding: 1.5rem var(--horizontal-padding);
        margin-right: 4rem;
        font-size: 0.6875rem;
      }
    }
  }

}