/* Fonts */

:root {
    --title-font: 'Pacifico', cursive;
    --sec-title-font: 'Caveat', cursive;
    --main-font:  'Josefin Sans', sans-serif;

    --title-1-s: 3.33rem;
    --title-2-s: 2.22rem;
    --title-3-s: 1.667rem;
    --title-4-s: 1.278rem;
    --content-n: 0.889rem;
    --content-s: 0.722rem;
    --big-t-s: 6.667rem;
    --med-t-s: 4rem;
    --note-s: 2rem;
}

h1, h2, h3, h4, h5, h6, .title-font, .btn {
    font-family: var(--title-font);   
}
body {
    font-family: var(--main-font);
    font-size: var(--content-n);
}

h1, .title-1 {
    font-size: var(--title-1-s);
    line-height: 1;
}
h2, .title-2 {
   font-size: var(--title-2-s);
   font-family: var(--main-font);
}
h4, .title-3 {
    font-size: var(--title-3-s);
    font-family: var(--title-font);
}
.title-4 {
    font-size: var(--title-4-s);
    font-family: var(--sec-title-font);
}
.title-5 {
    font-size: var(--title-2-s);
    font-family: var(--sec-title-font);
}
.big-t {
    font-size: var(--big-t-s);
    line-height: 1;
}
.med-t {
    font-size: var(--med-t-s);
}
.note {
    font-size: var(--note-s);
}
p {
    font-size: 1rem;
    font-family: var(--main-font);
}

.content-style {
    line-height: 2;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
.ln-ht {
    line-height: 1.5;
}


@media screen and (max-width:1280px) {
    .big-t {
        font-size: 4rem;
    }
    .note {
        font-size: 1.6rem;
    }
    .med-t {
        font-size: 3rem;
    }
}
@media screen and (max-width:1024px) {
    h1, .title-1 {
        text-align: left;
        font-size: 2.7rem;
    }
    h2, .title-2 {
        text-align: left;
        font-size: 1.8rem;
    }    
    .title-4 {
        font-size: 2rem;
        font-family: var(--sec-title-font);
    }
    .big-t {
        font-size: 4rem;
    }
    .note {
        font-size: 1.6rem;
    }
    .med-t {
        font-size: 2.4rem;
    }
    .brocc .med-t {
        font-size: 2.8rem;
    }
    
}
@media screen and (max-width:800px) {
    .note {
        font-size: 1.4rem;
    }
    .med-t {
        font-size: 2rem;
    }
    .brocc .med-t {
        font-size: 1.8rem;
    }
    .fishermaid .big-t {
        font-size: 3.6rem;
    }
    .nxt-prv-800 {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .willem .big-t {
        font-size: 2.8rem;
    }
}
@media screen and (max-width:540px) {
    .big-t {
        font-size: 2.6rem;
    }
    .note {
        font-size: 1.4rem;
    }    
    .med-t {
        font-size: 1.4rem;
    }
    .brocc .med-t {
        font-size: 1.4rem;
    }
    .fishermaid .title-5 .big-t {
        font-size: 3rem;
    }
    .fishermaid .title-1 {
        font-size: 2.4rem;
    }
   
    .willem .big-t {
        font-size: 2.2rem;
    }
}
@media screen and (max-width:500px) {
    .fishermaid .big-t {
        font-size: 1.8rem;
    }
}