@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Outfit:wght@300;400;500&family=Playfair+Display:ital@1&display=swap');

:root {
  
  /* Grid */
  --grid-gutter: 20px;
  
  /* Spacing */
  --spacing-1: 15px;
  --spacing-2: 30px;
  --spacing-3: 45px;
  --spacing-4: 70px;
  --spacing-5: 110px;

  /* Typography */
  --heading-font: 'Outfit', sans-serif;
  --subheading-font: 'Dancing Script', cursive;
  --body-font: 'Outfit', sans-serif;
  --descriptive-font: 'Playfair Display', serif;

  /* Colors */
  --color-white: #FFFFFF;
  --color-grey: #2A2A2A;
  --color-light-grey: #444444;
  --color-gold: #CCAF87;
  --color-light-gold: #FAF8F4;

}


/*--------------------------------------------------------------
  >> : Typography
--------------------------------------------------------------*/

  * {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6em;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-family: var(--heading-font);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 400;
  }

  h1, .h1 {
    font-size: 5em;
    line-height: 1.2em;
    margin: 2rem 0;
  }

  h2, .h2 {
    font-size: 2.1em;
    line-height: 1.2;
    margin: 1rem 0;
  }

  h3, .h3 {
    font-size: 1.1em;
    line-height: 1.5;
  }

  h4, .h4 {
    font-size: 1.06em;
    line-height: 1.2em;
  }

  h5, .h5 {
    font-size: 1.06em;
    line-height: 1.2em;
  }

  h6, .h6 {
    font-size: 1.06em;
    line-height: 1.2em;
  }

  @media (max-width: 1200px) {
    h1, .h1 {
      font-size: 4em;
      line-height: 1.2em;
      margin: 1.5rem 0;
    }


  }

  @media (max-width: 992px) {
    body {
      font-size: 1rem;
    }

    h1, .h1 {
      font-size: 2.6em;
      line-height: 1.2em;
      margin: 1.5rem 0;
    }

    h2, .h2 {
      font-size: 1.6em;
      line-height: 1.2;
      margin: 1rem 0;
    }

    h3, .h3 {
      font-size: 1.1em;
      line-height: 1.5;
    }

    h4, .h4 {
      font-size: 1.06em;
      line-height: 1.2em;
    }

    h5, .h5 {
      font-size: 1.06em;
      line-height: 1.2em;
    }

    h6, .h6 {
      font-size: 1.06em;
      line-height: 1.2em;
    }
  }


  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child,
  p:first-child, 
  ul:first-child, 
  ol:first-child {
    margin-top: 0;
  }

  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child,
  p:last-child, 
  ul:last-child, 
  ol:last-child {
    margin-bottom: 0;
  }

  #AppMain ul,
  #AppMain ol {
    padding-left: 20px;
  }

  p, li {
    color: #717171;
  }

  .sub-title {
    font-family: var(--subheading-font);
    font-size: 1.5em;
    color: var(--color-gold);
  }

  .descriptive {
    font-family: var(--descriptive-font);
    font-size: 1.3em;
    color: var(--color-light-grey);
  }

  a.link {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8em;
    transition:all 300ms ease;
  }


  a.link:hover {
    color:var(--color-gold);
    transition:all 300ms ease;
  }


/*--------------------------------------------------------------
  >> : Background Colours
--------------------------------------------------------------*/
  

[data-bg-color="light-gold"] {
  background: var(--color-light-gold);
}

[data-bg-color="grey"] {
  background: var(--color-light-grey);
}

[data-bg-color="grey"] h1,
[data-bg-color="grey"] h2,
[data-bg-color="grey"] h3,
[data-bg-color="grey"] h4,
[data-bg-color="grey"] h5,
[data-bg-color="grey"] a,
[data-bg-color="grey"] p {
  color: #fff;
}

[data-bg-color="grey"] .sub-title {
  color: var(--color-gold) !important;
}