@font-face {
    font-family: 'AmericanSans';
    src:
        /* url('https://www.aa.com/content/fonts/american-v2/americansans-regular.woff'), */
        url('americansans-regular.woff');
}

/* @font-face {
    font-family: 'AmericanSansLight';
    src: url('americansans-light.woff');
} */

:root {
    /* Typeface references */
    --md-ref-typeface-brand: 'AmericanSans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --md-ref-typeface-plain: 'AmericanSans Var', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --md-ref-typeface-headline: 'AmericanSans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --md-ref-typeface-weight-regular: 400;
    --md-ref-typeface-weight-medium: 500;

    /* Display */
    --md-sys-typescale-display-large-font: var(--md-ref-typeface-weight-regular) 57px/64px var(--md-ref-typeface-brand);
    --md-sys-typescale-display-large-letter-spacing: -0.25px;

    --md-sys-typescale-display-medium-font: var(--md-ref-typeface-weight-regular) 45px/52px var(--md-ref-typeface-brand);
    --md-sys-typescale-display-medium-letter-spacing: 0px;

    --md-sys-typescale-display-small-font: var(--md-ref-typeface-weight-regular) 36px/44px var(--md-ref-typeface-brand);
    --md-sys-typescale-display-small-letter-spacing: 0px;

    /* Headline */
    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-weight-regular) 32px/40px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large-letter-spacing: 0px;

    --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-weight-regular) 28px/36px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-medium-letter-spacing: 0px;

    --md-sys-typescale-headline-small-font: var(--md-ref-typeface-weight-regular) 24px/32px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-small-letter-spacing: 0px;

    /* Title */
    --md-sys-typescale-title-large-font: var(--md-ref-typeface-weight-regular) 22px/28px var(--md-ref-typeface-plain);
    --md-sys-typescale-title-large-letter-spacing: 0px;

    --md-sys-typescale-title-medium-font: var(--md-ref-typeface-weight-medium) 16px/24px var(--md-ref-typeface-plain);
    --md-sys-typescale-title-medium-letter-spacing: 0.15px;

    --md-sys-typescale-title-small-font: var(--md-ref-typeface-weight-medium) 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-title-small-letter-spacing: 0.1px;

    /* Label */
    --md-sys-typescale-label-large-font: var(--md-ref-typeface-weight-medium) 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-large-letter-spacing: 0.1px;

    --md-sys-typescale-label-medium-font: var(--md-ref-typeface-weight-medium) 12px/16px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-medium-letter-spacing: 0.5px;

    --md-sys-typescale-label-small-font: var(--md-ref-typeface-weight-medium) 11px/16px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-small-letter-spacing: 0.5px;

    /* Body */
    --md-sys-typescale-body-large-font: var(--md-ref-typeface-weight-regular) 16px/24px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-large-letter-spacing: 0.5px;

    --md-sys-typescale-body-medium-font: var(--md-ref-typeface-weight-regular) 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-medium-letter-spacing: 0.25px;

    --md-sys-typescale-body-small-font: var(--md-ref-typeface-weight-regular) 12px/16px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-small-letter-spacing: 0.4px;
}