@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700');

@font-face {
  font-family: 'Elaine Global';
  src: url('../fonts/ElaineGlobal.woff2') format('woff2'),
  url('../fonts/ElaineGlobal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');
*/


:root {
    /*
        Fonts
    */
    --font-heading: 'Oswald';
    --font-body: 'Barlow';

    /*
        Headings
     */
    --brand-headings-h1-home-line-height: 1.05;
    --brand-headings-h1-home-letter-spacing: -0.025em;
    --brand-headings-h1-home-text-transform: uppercase;
    --brand-headings-h1-home-font-weight: 1.05;

    --brand-headings-h1-home-lg-font-size: 3.5rem;
    --brand-headings-h1-home-lg-max-width: 30rem;

    --brand-headings-h1-home-xl-font-size: 5rem;
    --brand-headings-h1-home-xl-max-width: 45.6875rem;

    --brand-headings-h2-mobile-text-transform: uppercase;
    --brand-headings-h2-desktop-text-transform: uppercase;

    /*
        Colours
    */

    --brand-primary: #F9D036;
    --brand-secondary: #E96968;

    --brand-contrast-primary: black;

    /*
        Components - Button
    */
    --brand-button-primary-background-color: #1A1A1A;
    --brand-button-primary-hover-background-color: var(--brand-secondary);

    --brand-button-font-family: var(--font-heading);
    --brand-button-border-radius: 2px;
    --brand-button-text-transform: uppercase;

    --brand-button-padding-x-mobile: 1.25rem;
    --brand-button-font-size-mobile: 14px;

    @media (min-width: 1024px) {
      --brand-button-lg-padding-x-desktop: 3.125rem;
      --brand-button-font-size-desktop: 16px;
    }

    --brand-button-lg-padding-top: 14.5px;
    --brand-button-lg-padding-bottom: 17.5px;

    /*
        Component - Selectable Game Card
     */
    --brand-selectable-game-card-active-border-color: #4d72e2;

    /*
        Component - Mode
     */
    --brand-mode-background-color: #f7f9ff;
    --brand-mode-border-color: #4d72e2;
    --brand-mode-most-popular-background-color: #1a1a1a;

    /*
        Component - Add Photo
     */
    --brand-add-photo-background-color: #f7f9ff;
    --brand-add-photo-border-color: #4d72e2;

    /*
      Pages - Home
     */
    --brand-home-lg-left-column-width: 50%;
    --brand-home-lg-right-column-width: 50%;
    --brand-home-xl-left-column-width: 64.48598131%;
    --brand-home-xl-right-column-width: 35.51401869%;
}

/*

[Overrides] Home

 */

.home__mobile-background {
  aspect-ratio: 360/232;
}

.home .home__mobile-background-image {
  /*

  Dimensions @2x: 2048x1720
  Dimensions @1x: 1024x860

   */

  position: absolute;

  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.home .home__mobile-foreground-image {
  /*

  Dimensions @2x: 1022x1324
  Dimensions @1x: 511x662

  */
  position: absolute;

  object-fit: contain;
  width: 511px;
  height: 662px;
  max-width: calc(100% - 32px);
  max-height: 86.20689655%; /* (464px - 400px) * 100 */

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-position: 50% 50%;
}

.home .home__desktop-background-image {
  /*

  Dimensions @2x: 2148x2880
  Dimensions @1x: 1074x1440

   */

  position: absolute;

  object-fit: contain;
  width: 1074px;
  height: 1440px;
  max-width: unset;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  @media (min-width: 2561px) {
    mask-image:
      linear-gradient(to right, transparent 0, black 160px, black calc(100% - 160px), transparent 100%),
      linear-gradient(to bottom, transparent 0, black 160px, black calc(100% - 160px), transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect; /* Safari */
  }
}

.home .home__desktop-foreground-image {
  /*

  Dimensions @2x: 1130x1464
  Dimensions @1x: 565x732

  */

  position: absolute;

  object-fit: contain;
  width: 565px;
  height: 732px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-position: 50% 70.8%;
}