:root {
    
    --font-family: "Rubik";
    --p-family: var(--font-family);
    --base-font-size: 16;

    --h1-size: clamp(2.5rem, 2.5rem + ((1vw - .2rem) * 1.25), 3.25rem);
    --h1-line-height: 1.15em;
    --h1-weight: 700;
    
    --h2-size: clamp(2.125rem, 2.125rem + ((1vw - .2rem) * .625), 2.5rem);
    --h2-line-height: 1.15em;
    --h2-weight: 700;
    
    --h3-size: clamp(1.875rem, 1.875rem + ((1vw - .2rem) * .417), 2.125rem);
    --h3-line-height: 1.15em;
    --h3-weight: 600;

    --h4-size: clamp(1.55rem, 1.55rem + ((1vw - .2rem) * .3), 2rem);
    --h4-line-height: 1.15em;
    --h4-weight: 500;

    --p-size: 1rem;
    --p-line-height: 1em;
    --p-weight: 400;

    --p-s-size: .8rem;
    --p-s-line-height: .8em;

    --p-xs-size: 0.688rem;
    --p-xs-line-height: 0.688em;

    --p-l-size: 1.125rem;
    --p-l-line-height: 1.4em;
}

body {
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Light-7e567274cc319dd6df6baa0a59a93793.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-LightItalic-80b727d2d40d29e86903527458c73ce0.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Regular-9d6543fe5770a7e9b2259e53c5c04ab6.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-Italic-62aa1aea80c703fa00483fa55a9b41aa.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Medium-8a068258f1f852423c40a4d91c391284.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-MediumItalic-708513ce257f3e4ee250dda118b3e01a.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-SemiBold-70e392fd14c11cc73f409e16aec61ad4.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-SemiBoldItalic-1cab4d5736567c489a4ed7e79ff58252.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Bold-2e8e13899822912f9e9bd5c0baaacfcf.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-BoldItalic-70cae478df679a4c18e1411cf77f499b.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-ExtraBold-3d772b412d257a1910369e831ae070e5.ttf");
    font-weight: 800;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-ExtraBoldItalic-f43b2940a193e70eca9e207c7933453d.ttf");
    font-weight: 800;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Black-681587479d8ba6b650e604bbe8db5f6d.ttf");
    font-weight: 900;
}

@font-face {
    font-family: "Rubik";
    font-style: italic;
    src: url("../../fonts/Rubik-BlackItalic-d4faec7c6d244368d04f18d78aebcc54.ttf");
    font-weight: 900;
}

h1,
.h1 {
    font-family: var(--h1-family);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing, 0);
    color: var(--primary);
}

h2,
.h2 {
    font-family: var(--h2-family);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing, 0);
    color: var(--primary);
}

h3,
.h3 {
    font-family: var(--h3-family);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing, 0);
    color: var(--primary);
}

h4,
.h4 {
    font-family: var(--h4-family);
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing, 0);
    color: var(--blue-800);
}

h5,
.h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h1-line-height);
}

p {
    font-family: var(--p-family);
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: var(--p-line-height);
    letter-spacing: var(--p-letter-spacing, 0);
}

.p-l {
    font-family: var(--p-family);
    font-size: var(--p-l-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing, 0);
}