@charset "UTF-8";
/* ==================================================
    F³ :: FFFoundation
    The Unified UX Foundation Template
    © Filozofski Fakultet Univerziteta u Nišu, 2022-
   ================================================== */


/* =======================
    ROOT VARS
   ======================= */
:root {
  --font-heading: "Oswald";
  --weight-h-light: 'wght' 300;
  --weight-h-normal: 'wght' 400;
  --weight-h-medium: 'wght' 500;
  --weight-h-demi: 'wght' 600;
  --weight-h-bold: 'wght' 700;
  --weight-h-bolder: 'wght' 800;
  --weight-h-black: 'wght' 900;
}


/* =========================
    TYPEFACE AND TYPOGRAPHY
   ========================= */

@font-face {
  font-family: "Oswald";
  font-feature-settings: "lnum" 1;
  src: url('../../fonts/oswald/woff2/oswald.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
h1 {
  text-transform: uppercase;
  letter-spacing: -1.25px;
  font-variation-settings: var(--weight-h-normal);
}
h2 {
  letter-spacing: -0.5px;
  font-variation-settings: var(--weight-h-normal);
}
h3 {
  letter-spacing: -0.5px;
  font-variation-settings: var(--weight-h-light);
}
h4 {
  text-transform: uppercase;
  font-variation-settings: var(--weight-h-light);
}


/* =======================
    SIZING CHART
   ======================= */

/* === F³ Size "M" === */
@media (max-width:767px) {
  :root {
    --h1-padding: 0;
    --h2-padding: 0;
    --h3-padding: 0;
	  --h4-padding: 0;
    --h1-margin: 0 0 15px;
    --h2-margin: 0 0 15px;
    --h3-margin: 0 0 15px;
	  --h4-margin: 0 0 8px;
  }
  h1    {font-size: 2.25em; line-height: 120%}
  h2    {font-size: 1.95em; line-height: 120%}
  h3    {font-size: 1.65em; line-height: 120%}
  h4    {font-size: 1.40em; line-height: 100%}
}

/* === F³ Size "T1" === */
@media (min-width:768px) and (max-width:991px) {
  :root {
    --h1-padding: 0;
    --h2-padding: 0;
    --h3-padding: 0;
	  --h4-padding: 0;
    --h1-margin: 0 0 15px;
    --h2-margin: 0 0 15px;
    --h3-margin: 0 0 15px;
	  --h4-margin: 0 0 8px;
  }
  h1    {font-size: 2.75em; line-height: 120%}
  h2    {font-size: 2.25em; line-height: 100%}
  h3    {font-size: 1.75em; line-height: 100%}
  h4    {font-size: 1.50em; line-height: 100%}
}

/* === F³ Size "T2" === */
@media (min-width:992px) and (max-width:1199px) {
  :root {
    --h1-padding: 0;
    --h2-padding: 0;
    --h3-padding: 0;
	  --h4-padding: 0;
    --h1-margin: 0 0 15px;
    --h2-margin: 0 0 15px;
    --h3-margin: 0 0 15px;
	  --h4-margin: 0 0 8px;
  }
  h1    {font-size: 2.75em; line-height: 120%}
  h2    {font-size: 2.25em; line-height: 100%}
  h3    {font-size: 1.75em; line-height: 100%}
  h4    {font-size: 1.50em; line-height: 100%}
}

/* === F³ Size "D" === */
@media (min-width:1200px) {
  :root {
    --h1-padding: 0;
    --h2-padding: 0;
    --h3-padding: 0;
	  --h4-padding: 0;
    --h1-margin: 0 0 15px;
    --h2-margin: 0 0 15px;
    --h3-margin: 0 0 15px;
	  --h4-margin: 0 0 8px;
  }
  h1     {font-size: 3.50em; line-height: 120%}
  h2     {font-size: 2.75em; line-height: 100%}
  h3     {font-size: 2.00em; line-height: 100%}
  h4     {font-size: 1.75em; line-height: 100%}
}