/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Font-face setup
***********************************************/
@font-face {
  font-family:'txt-body';
  src:url('../font/open-sans-light.woff2') format('woff2'),
      url('../font/open-sans-light.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'txt-body';
  src:url('../font/open-sans-semi-bold.woff2') format('woff2'),
      url('../font/open-sans-semi-bold.woff') format('woff');
  font-weight:bold;
  font-style:bold;
}

@font-face {
  font-family:'txt-title';
  src:url('../font/film-noir.woff2') format('woff2'),
      url('../font/film-noir.woff') format('woff');
  font-weight:bold;
  font-style:bold;
}

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Base typography *****/
html                                            { font-size:100%; }
body                                            { margin:0; padding:0; font-family:'txt-body', sans-serif; font-size:var(--text-sm); line-height:var(--leading-sm); background-color:var(--color-brand100); }
body *                                          { letter-spacing:0.02em; }

/***** Headings *****/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6                    { font-family:'txt-title', sans-serif; margin:0; text-wrap:pretty; text-transform:uppercase;
	a 																						{ text-decoration:none; }
}

h1, .h1                                         { font-size:var(--text-4xl); line-height:var(--leading-4xl); }
h2, .h2                                         { font-size:var(--text-3xl); line-height:var(--leading-3xl); }
h3, .h3                                         { font-size:var(--text-2xl); line-height:var(--leading-2xl); }
h4, .h4                                         { font-size:var(--text-xl); line-height:var(--leading-xl); }
h5, .h5                                         { font-size:var(--text-lg); line-height:var(--leading-lg); }
h6, .h6                                         { font-size:var(--text-md); line-height:var(--leading-sm); }

/***** Typography Elements *****/
p                                               { max-width:75ch; margin:0; line-height:var(--leading-sm); text-wrap:pretty; }
strong                                          { font-weight:bold; color:var(--color-brand700); }
em                                              { font-style:italic; }
small                                           { font-size:0.875em; }
sup, sub                                        { font-size:0.75em; line-height:0; position:relative; vertical-align:baseline; }
sup                                             { top:-0.4em; }
sub                                             { bottom:-0.25em; }
hr                                              { border:0; height:1px; background:var(--color-ui-600); width:60px; margin:2rem 0; }

/***** Links *****/
a                                               { color:inherit; text-decoration:underline; transition:all 0.2s ease; }
.overall                                        { width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; cursor:pointer; }

/***** Utility typography *****/
.txt--strong                                    { font-weight:bold; }
.txt--link                                      { text-decoration:underline; font-weight:bold; }
.txt--brand 																		{ color:var(--color-brand-600); }
.icon--brand 																		{ color:var(--color-brand-600); }

/***** Layout helpers *****/
.flex                                           { display:inline-flex; gap:var(--space-2); align-items:center; }

/***** Blockquotes / Figures *****/
figure                                          { padding:10px 0 10px 20px; border-left:2px solid var(--color-ui-800); position:relative; }

blockquote                                      { margin:0; padding:0; }
blockquote p                                    { font-style:italic; }
blockquote a                                    { display:inline-block; }

figcaption                                      { padding:0; }
figcaption::before                              { content:'\2014'; display:block; }
figcaption > span                               { margin:0; padding:0 5px; display:inline-block; background-color:var(--color-ui-900); color:var(--color-ui-0); border-radius:var(--radius-md); }

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  hr                                            { margin:4rem 0; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px)                       {
}

/***********************************************
Desktop HD
***********************************************/
@media (min-width:1440px)                       {
}