/* OPEN SANS */

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}



html {
    font-size: 100%;
    scroll-padding: 120px;
}

body {
    --text-size-80: 0.694rem;
    --text-size-90: 0.833rem;
    --text-size-95: 0.95rem;
    --text-size-100: 1rem;
    --text-size-200: 1.2rem;
    --text-size-300: 1.44rem;
    --text-size-400: 1.728rem;
    --text-size-500: 2.074rem;
    --text-size-600: 2.488rem;
    --text-size-700: 2.986rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #222222;
    line-height: 1.2;

    --sp-ss:0.2rem;
    --sp-xxs:0.3rem;
    --sp-xs:0.5rem;
    --sp-s:0.8rem;
    --sp-m:1rem;
    --sp-mm:1.5rem;
    --sp-x:2rem;
    --sp-xx:2.5rem;
    --sp-xxx:3rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6{
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    line-height: 1.2;
}



/* DEFAULT */

p {
    font-size: var(--text-size-100);
}

small {
    font-size: var(--text-size-90);
}

strong {
    font-weight: 700;
}

/* HEADER SIZE */

h6,
.h6 {
    font-size: var(--text-size-100);
}

h5,
.h5 {
    font-size: var(--text-size-300);
}

h4,
.h4 {
    font-size: var(--text-size-400);
}

h3,
.h3 {
    font-size: var(--text-size-500);
}

h2,
.h2 {
    font-size: var(--text-size-600);
}

h1,
.h1 {
    font-size: var(--text-size-700);
}

/* TEXT SIZES | ts = text size */

.ts-80 {
    font-size: var(--text-size-80);
}

.ts-90 {
    font-size: var(--text-size-90);
}

.ts-95{
    font-size: var(--text-size-95);
}

.ts-100 {
    font-size: var(--text-size-100);
}

.ts-200 {
    font-size: var(--text-size-200);
}

.ts-300 {
    font-size: var(--text-size-300);
}

.ts-400 {
    font-size: var(--text-size-400);
}

.ts-500 {
    font-size: var(--text-size-500);
}

.ts-600 {
    font-size: var(--text-size-600);
}

.ts-700 {
    font-size: var(--text-size-700);
}


/* MEDIA */

@media screen and (max-width: 769px) {
    html {
        font-size: 100%;
    }

    body {
        --text-size-80: 0.66rem;
        --text-size-90: 0.78rem;
        --text-size-95: 0.91rem;
        --text-size-100: 1rem;
        --text-size-200: 1.125rem;
        --text-size-300: 1.266rem;
        --text-size-400: 1.424rem;
        --text-size-500: 1.602rem;
        --text-size-600: 1.802rem;
        --text-size-700: 2.027rem;

    }
}




/* LINE HEIGHT | th = text height */

.th-1 {
    line-height: 1;
}

.th-m {
    line-height: 1.3;
}

.th-t {
    line-height: 1.6;
}


/* FONT-WEIGHT | tw = text weight*/

.tw-200 {
    font-weight: 200;
}

.tw-300 {
    font-weight: 300;
}

.tw-400 {
    font-weight: 400;
}

.tw-500 {
    font-weight: 500;
}

.tw-600 {
    font-weight: 600;
}

.tw-700 {
    font-weight: 700;
}

.tw-800 {
    font-weight: 700;
}

.tw-900 {
    font-weight: 900;
}















.container_fonts {
    display: flex;
    gap: 20px;
    flex-direction: column
}

.line_container {
    border-top: 1px solid grey;
}

.font-comparison {
    display: flex;
    gap: 20px;
}