/* Variables */

html {font-size: 16px;}

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

:root {
  --darkblue-100: rgb(20, 33, 49); 
  --seablue-100: rgb(42, 63, 94); 
  --blue-100: rgb(105, 138, 157); 
  --lightblue-100: rgb(200, 210, 216);
  --red-100: rgb(189, 141, 141);
  --beige-100: rgb(238, 218, 211);
  --black-100: rgb(42, 48, 55);
  --black-60: rgb(158, 158, 158);
  --black-40: rgb(187, 187, 187);
  --black-20: rgb(235, 235, 235);
  --black-10: rgb(238, 238, 238);
  --black-00: rgb(255, 255, 255);
}

/* Font sizes ------------------------------- */

:root {

  /* 13px - 15px */
  --fs-xx-mini: calc(clamp(0.813rem, 0.156vw + 0.75rem, 0.938rem));

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

  /* 16px - 18px */
  --fs-mini: calc(clamp(1rem, 0.156vw + 0.938rem, 1.125rem));

  /* 18px - 20px */
  --fs-small: calc(clamp(1.125rem, 0.196vw + 1.074rem, 1.25rem));

  /* 20px - 24px */
  --fs-medium: calc(clamp(1.25rem, 0.392vw + 1.147rem, 1.5rem));

  /* 24px - 28px */
  --fs-large: calc(clamp(1.5rem, 0.392vw + 1.397rem, 1.75rem));

  /* 28px - 32px */
  --fs-x-large: calc(clamp(1.625rem, 0.588vw + 1.471rem, 2rem));

  /* 24px - 42px */
  --fs-xx-large: calc(clamp(1.5rem, 1.765vw + 1.037rem, 2.625rem));

  /* 40px - 48px */
  --fs-xxx-large: calc(clamp(2.5rem, 0.784vw + 2.294rem, 3rem));

}

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

:root {
  --lh-mini: 100%; 
  --lh-small: 110%;
  --lh-medium: 130%;  
  --lh-large: 140%; 
  --lh-x-large: 160%; 
}

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

:root {
  --fw-light: 300; 
  --fw-regular: 400; 
  --fw-medium: 500;
  --fw-large: 600;
  --fw-x-large: 600;
}

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

:root {

  /* 5px - 10px */
  --sp-mini: calc(clamp(0.313rem, 0.49vw + 0.184rem, 0.625rem));

  /* 10px - 20px */
  --sp-small: calc(clamp(0.625rem, 0.98vw + 0.368rem, 1.25rem));

  /* 15px - 30px */
  --sp-medium: calc(clamp(0.938rem, 1.471vw + 0.551rem, 1.875rem));

  /* 20px - 40px */
  --sp-large: calc(clamp(1.25rem, 1.961vw + 0.735rem, 2.5rem));

  /* 30px - 60px */
  --sp-x-large: calc(clamp(1.875rem, 2.941vw + 1.103rem, 3.75rem));

  /* 50px - 100px */
  --sp-xx-large: calc(clamp(3.125rem, 4.902vw + 1.838rem, 6.25rem));

}

/* 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-rr {text-align: right;}
.ta-rl {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-rr {text-align: right;}
  .ta-rl {text-align: left;}

}