@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-ThinItalic.9472dc50023a.woff2") format('woff2'),
        url("../../fonts/ClarityCity-ThinItalic.c1f1b0365b5d.woff") format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-MediumItalic.4ddae7258515.woff2") format('woff2'),
        url("../../fonts/ClarityCity-MediumItalic.1ce953329e73.woff") format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Semi';
    src: url("../../fonts/ClarityCity-SemiBoldItalic.11fbe794f821.woff2") format('woff2'),
        url("../../fonts/ClarityCity-SemiBoldItalic.0a9929f8e65f.woff") format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Regular.b9f19aaee12d.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Regular.46b9cbf1f542.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Light.4fea06014559.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Light.c5ec4c39a4e0.woff") format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Semi';
    src: url("../../fonts/ClarityCity-SemiBold.e8b53eeec5a7.woff2") format('woff2'),
        url("../../fonts/ClarityCity-SemiBold.d9dfc84d2bff.woff") format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Thin.f21b846cb3dc.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Thin.b4d443a2451d.woff") format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Medium.430ba5bae56a.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Medium.bee4670a1f71.woff") format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-RegularItalic.f5aa5a25671e.woff2") format('woff2'),
        url("../../fonts/ClarityCity-RegularItalic.d2083c2613c8.woff") format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-LightItalic.b74b5dd4ebda.woff2") format('woff2'),
        url("../../fonts/ClarityCity-LightItalic.7633ed29bc87.woff") format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Bold.29a7d5dff645.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Bold.c7ca4a8b9419.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Extra';
    src: url("../../fonts/ClarityCity-ExtraBoldItalic.5e99bba0269a.woff2") format('woff2'),
        url("../../fonts/ClarityCity-ExtraBoldItalic.bf2075801fa1.woff") format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Extra';
    src: url("../../fonts/ClarityCity-ExtraLight.fe368cb77406.woff2") format('woff2'),
        url("../../fonts/ClarityCity-ExtraLight.6b7e53339abe.woff") format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-Black.86593070fa79.woff2") format('woff2'),
        url("../../fonts/ClarityCity-Black.7db78649f3bd.woff") format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Extra';
    src: url("../../fonts/ClarityCity-ExtraLightItalic.56d36159b4c3.woff2") format('woff2'),
        url("../../fonts/ClarityCity-ExtraLightItalic.29ded42878ca.woff") format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City Extra';
    src: url("../../fonts/ClarityCity-ExtraBold.a3074c57fffe.woff2") format('woff2'),
        url("../../fonts/ClarityCity-ExtraBold.7f09a62879c9.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-BoldItalic.29d259eea833.woff2") format('woff2'),
        url("../../fonts/ClarityCity-BoldItalic.781a9e0c46b4.woff") format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clarity City';
    src: url("../../fonts/ClarityCity-BlackItalic.35c3019e02e7.woff2") format('woff2'),
        url("../../fonts/ClarityCity-BlackItalic.1cf3ce6007a8.woff") format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* base */
:root {
    --primary:      #0087A5;
    --secondary:    #F86F11;
    --tertiary:     #FFF7DE;

    --primary-dark: #004250;

    --font-family:  'Clarity City', sans-serif;
}