/* Variables */

html {font-size: 16px;}

/* Colors ----------------------------------- */

:root {
  --gold-100: rgb(195, 153, 83);
  --black-100: rgb(17, 20, 15);
  --black-60: rgb(127, 127, 127);
  --black-40: rgb(178, 178, 178);
  --black-10: rgb(248, 248, 248);
  --black-00: rgb(255, 255, 255);

}

/* Font sizes ------------------------------- */
:root {

  /* 0.52 */

  /* 14px - 16px */
  --fs-x-mini: calc(clamp(0.875rem, 0.156vw + 0.813rem, 1rem));

  /* 16px - 20px */
  --fs-mini: calc(clamp(1rem, 0.312vw + 0.875rem, 1.25rem));

  /* 20px - 32px */
  --fs-small: calc(clamp(1.25rem, 0.937vw + 0.876rem, 2rem));

  /* 26px - 42px */
  --fs-medium: calc(clamp(1.625rem, 1.249vw + 1.126rem, 2.625rem));

  /* 32px - 66px */
  --fs-large: calc(clamp(2rem, 2.654vw + 0.94rem, 4.125rem));

  /* 40px - 76px */
  --fs-x-large: calc(clamp(2.5rem, 2.81vw + 1.378rem, 4.75rem));

  /* 60px - 100px */
  --fs-xx-large: calc(clamp(3.75rem, 3.123vw + 2.503rem, 6.25rem));

}


/* Line height ------------------------------ */

:root {
  --lh-small: 100%; 
  --lh-medium: 110%; 
  --lh-large: 130%; 
  --lh-x-large: 150%; 
}

/* Font weights ----------------------------- */

:root {
  --fw-extralight: 300; 
  --fw-light: 300; 
  --fw-regular: 400; 
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
}

/* Margins ---------------------------------- */

:root {

  /* 0.52 */

  /* 1px - 3px */
  --sp-x-mini: calc(clamp(0.063rem, 0.156vw + 0rem, 0.188rem));

  /* 2px - 6px */
  --sp-mini: calc(clamp(0.125rem, 0.312vw + 0rem, 0.375rem));

  /* 6px - 12px */
  --sp-small: calc(clamp(0.375rem, 0.468vw + 0.188rem, 0.75rem));

  /* 12px - 18px */
  --sp-medium: calc(clamp(0.75rem, 0.468vw + 0.563rem, 1.125rem));

  /* 20px - 32px */
  --sp-large: calc(clamp(1.25rem, 0.937vw + 0.876rem, 2rem));

  /* 26px - 62px */
  --sp-x-large: calc(clamp(1.625rem, 2.81vw + 0.503rem, 3.875rem));

  /* 32px - 92px */
  --sp-xx-large: calc(clamp(2rem, 4.684vw + 0.129rem, 5.75rem));

}

/* Shortcommands ---------------------------- */

.ta-ll {text-align: left;}
.ta-lc {text-align: left;}
.ta-lr {text-align: left;}
.ta-cc {text-align: center;}
.ta-cl {text-align: center;}
.ta-cr {text-align: center;}
.ta-rl {text-align: right;}
.ta-rc {text-align: right;}
.ta-rr {text-align: right;}

/* Media Queries - Large 1025px -> ---------- */
@media screen and (min-width: 64.063em) {

}

/* Media Queries - Medium 640px -> 1024px --- */
@media screen and (max-width: 64em) {



}

/* Media Queries - Small -> 640px ----------- */
@media screen and (max-width: 40em) {

  /* Shortcommands */

  .ta-ll {text-align: left;}
  .ta-lc {text-align: center;}
  .ta-lr {text-align: right;}
  .ta-cc {text-align: center;}
  .ta-cl {text-align: left;}
  .ta-cr {text-align: right;}
  .ta-rl {text-align: left;}
  .ta-rc {text-align: center;}
  .ta-rr {text-align: right;}

}