:root {
    --p-s-size: .85rem;
    --p-size: 1rem;
    --h5-size: 1.125rem;
    --p-l-size: 1.125rem;
    --h4-size: 1.25rem;
    --h3-size: 1.5rem;
    --h2-size: 1.75rem;
    --h1-size: 2.5rem;

    --h1-weight: 700;
    --h2-weight: 700;
    --h3-weight: 500;
    --h5-weight: 600;
    --p-weight: 400;
    
    --h1-line-height: 1.15;
    --h2-line-height: 1.15;
    --h3-line-height: 1.12;
    --p-line-height: 1.12;
}

body {
    -webkit-font-smoothing: antialiased;
    -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(--blue-800);
    text-transform: uppercase;
}

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(--blue-800);
    text-transform: uppercase;
}

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(--blue-800);
}

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);
}

@media screen and (min-width: 64rem) /* 1024px */ {

    :root {
        --p-size: 1rem;
        --h5-size: 1.125rem;
        --p-l-size: 1.25rem;
        --h4-size: 1.375rem;
        --h3-size: 1.625rem;
        --h2-size: 2rem;
        --h1-size: 3.5rem;
    }

}