/* ==========================================================
   HTML
   ========================================================== */
@font-face {
    font-family: "Roboto Flex";
    src: url("../assets/fonts/RobotoFlex-MarkSolutions.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}



html {
    font-size: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
}


/* ==========================================================
   BODY
   ========================================================== */

body {

    font-family: var(--font-family);
    font-size: var(--font-size-350);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-350);
    font-stretch: 103%;
    letter-spacing: -0.005em;
    font-optical-sizing: auto;
    font-variation-settings: "GRAD" -25;

    color: var(--color-gray-900);
    background-color: var(--color-white);
}

@media (max-width: 1199px) {

    body {
        font-size: var(--font-size-300);
    }

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    font-weight: var(--font-weight-600);
    line-height: var(--line-height-tight);

    color: inherit;
}

p {
    margin: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

strong {
    font-weight: var(--font-weight-550);
}