/* ==============================
   FONT IMPORTS
   ============================== */

@font-face {
    font-family: 'Lato';
    src: url('Lato-Italic.woff2') format('woff2'),
        url('Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Regular.woff2') format('woff2'),
        url('Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Bold.woff2') format('woff2'),
        url('Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-BoldItalic.woff2') format('woff2'),
        url('Lato-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-BlackItalic.woff2') format('woff2'),
        url('Lato-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('Lato-Black.woff2') format('woff2'),
        url('Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==============================
   ROOT VARIABLES
   ============================== */
:root {

    /* Font Family */

    --font-primary: "Lato", sans-serif;

    /* Font Weights */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* ==================================================
       Bootstrap Compatible Font Scale
    ================================================== */

    --fs-h1: 2.5rem;
    /* 40px */
    --fs-h2: 2rem;
    /* 32px */
    --fs-h3: 1.75rem;
    /* 28px */
    --fs-h4: 1.5rem;
    /* 24px */
    --fs-h5: 1.25rem;
    /* 20px */
    --fs-h6: 1rem;
    /* 16px */

    --fs-body: 1rem;
    /* 16px */
    --fs-small: .875rem;
    /* 14px */
    --fs-tiny: .75rem;
    /* 12px */

    /* Line Heights */

    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-loose: 1.75;

    /* Letter Spacing */

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
}

@media (max-width: 768px) {

    :root {

        --fs-h1: 2rem;
        /* 32px */
        --fs-h2: 1.75rem;
        /* 28px */
        --fs-h3: 1.5rem;
        /* 24px */
        --fs-h4: 1.25rem;
        /* 20px */
        --fs-h5: 1.125rem;
        /* 18px */
        --fs-h6: 1rem;
        /* 16px */

    }
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: normal;
    margin-bottom: .5rem;
}

small,
.errorMessage,
.error-msg,
.error:not(input),
footer {
    font-size: var(--fs-small);
}