@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,95,300..800;1,95,300..800&display=swap');
@font-face {
    font-family: 'Octopia';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/octopia/octopia.otf') format('opentype');
}

:root {
    --font-regular: "Open Sans", sans-serif;
    --font-alt: "Octopia", serif;
} 

body {
    background: var(--color-paper);
    min-height: 100vh;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 380;
    font-variation-settings:"wdth" 90;
    letter-spacing: -0.01em;
    line-height: 135%;
}
html {
    font-size: 18px;
}

strong, b {
  font-weight: 600;
}
.font-alt {
    font-family: var(--font-alt);
}

@media all and (min-width: 768px) {
    html {
        font-size: 20px;
    }
}

@media all and (min-width: 992px) {
    html {
        font-size: 20px;
    }
}

@media all and (min-width: 1600px) {
    html {
        font-size: 20px;
    }
} 
@media all and (min-width: 1900px) {
    html {
        font-size: 20px;
    }
} 
@media all and (min-width: 2100px) {
    html {
        font-size: 20px;
    }
} 
@media all and (min-width: 2400px) {
    html {
        font-size: 20px;
    }
} 

/*.text {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 320;
    font-variation-settings:"wdth" 80;
    letter-spacing: 0.02em;
    font-size: 1.1em;
}*/
.text {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 380;
    font-variation-settings:"wdth" 95;
    letter-spacing: -0.01em;
    font-size: 1.1rem;
    line-height: 145%;
}
@media (max-width: 2000px) {
    .text {
        font-size: 1.0rem;
        line-height: 145%;
    }
}
@media (max-width: 1599px) {
    .text {
        font-size: 0.95rem;
        line-height: 145%;
    }
}
@media (max-width: 1439px) {
    .text {
        font-size: 0.9rem;
        line-height: 145%;
    }
}
@media (max-width: 539px) {
    .text {
        font-size: 0.9rem;
        line-height: 145%;
    }
}

.text-s {
    font-size: 1rem;
}

/* =====  HEADING  ==================================================== */


:root {
    --h1: 2.75em;
    --h2: 2.5em;
    --h3: 2.1em; 
    --h4: 1.8em;
    --h5: 1.55em;
    --h6: 1.1em;
}
@media screen and (min-width: 540px) {
    :root {
        --h1: 3.3em;
        --h2: 2.8em;
        --h3: 2.4em; 
        --h4: 1.8em;
        --h5: 1.2em;
        --h6: 1.0em;
    }
}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 992px) {
    :root {
        --h1: 3.5em;
        --h2: 3.2em;
        --h3: 2.8em; 
        --h4: 1.9em;
        --h5: 1.5em;
        --h6: 1.0em;
    }
}
@media screen and (min-width: 1440px) {
    :root {
        --h1: 3.8em;
        --h2: 3.55em;
        --h3: 2.9em; 
        --h4: 2.05em;
        --h5: 1.6em;
        --h6: 1.1em;
    }
}
@media screen and (min-width: 1600px) {
    :root {
        --h1: 4em;
        --h2: 3.75em;
        --h3: 3em; 
        --h4: 2.15em;
        --h5: 1.65em;
        --h6: 1.2em;
    }

}
@media screen and (min-width: 2100px) {
    :root {
        --h1: 4em;
        --h2: 3.75em;
        --h3: 3em; 
        --h4: 2.25em;
        --h5: 1.7em;
        --h6: 1.2em;
    }
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-brown);
}

.h1 {
    font-size: var(--h1);
    font-weight: 300;
    line-height: 1em;
}
.h2 {
    font-size: var(--h2);
    line-height: 110%;
  
    font-weight: 300;
}
.h3 {
    font-size: var(--h3);
    font-weight: 300;
    line-height: 1.3em;
    
}
.h4 {
    font-size: var(--h4);
    letter-spacing: 0.03em;
    font-weight: 300;
    line-height: 1.3em;
}
.h5 {
    font-size: var(--h5);
    font-weight: 300;
    line-height: 1.4em;
}
.h6 {
    font-size: var(--h6);
    
    font-weight: 300;
    line-height: 1.5em;
}