:root {
    --ms-font-size-content: 18px;
    --ms-line-height-content: 1.55;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--ms-font-size-content);
}

/* The navigation has its own approved size and must not inherit the
   content scale: at 18px it no longer fits in the desktop header. */
.mainMenu .nav.menu li > a,
.mainMenu .nav.menu li > span {
    font-size: 16px !important;
}

.mainContent,
article.item-page,
.blog,
.category-list,
.contact,
.search,
.archive,
.tag-category {
    font-size: var(--ms-font-size-content);
}

.mainContent p,
.mainContent ul,
.mainContent ol,
.mainContent dl,
.mainContent table,
.mainContent blockquote,
.mainContent figcaption,
article.item-page p,
article.item-page ul,
article.item-page ol,
article.item-page dl,
article.item-page table,
article.item-page blockquote,
article.item-page figcaption,
.blog p,
.blog ul,
.blog ol,
.category-list p,
.category-list ul,
.category-list ol {
    font-size: var(--ms-font-size-content) !important;
    line-height: var(--ms-line-height-content);
}

body h1 {
    font-size: clamp(48px, 4vw, 60px) !important;
    line-height: 1.12;
}

body h2 {
    font-size: clamp(36px, 3vw, 44px) !important;
    line-height: 1.16;
}

body h3 {
    font-size: clamp(30px, 2.5vw, 36px) !important;
    line-height: 1.2;
}

body h4 {
    font-size: clamp(24px, 2vw, 28px) !important;
    line-height: 1.24;
}

body h5 {
    font-size: clamp(20px, 1.5vw, 22px) !important;
    line-height: 1.28;
}

body h6 {
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.3;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    overflow-wrap: anywhere;
}

@media (min-width: 601px) and (max-width: 1023px) {
    :root {
        --ms-font-size-content: 15px;
    }

    body h1 {
        font-size: clamp(38px, calc(34px + .8vw), 42px) !important;
    }

    body h2 {
        font-size: clamp(30px, calc(27px + .5vw), 32px) !important;
    }

    body h3 {
        font-size: clamp(26px, calc(23px + .6vw), 30px) !important;
    }

    body h4 {
        font-size: clamp(20px, calc(17px + .6vw), 24px) !important;
    }

    body h5 {
        font-size: clamp(18px, calc(16px + .4vw), 20px) !important;
    }

    body h6 {
        font-size: clamp(14px, calc(12px + .4vw), 16px) !important;
    }
}

@media (max-width: 600px) {
    :root {
        --ms-font-size-content: 15px;
    }

    body h1 {
        font-size: clamp(26px, 8vw, 32px) !important;
    }

    body h2 {
        font-size: clamp(22px, 6.5vw, 26px) !important;
    }

    body h3 {
        font-size: clamp(20px, 5.8vw, 24px) !important;
    }

    body h4 {
        font-size: clamp(16px, 4.8vw, 20px) !important;
    }

    body h5 {
        font-size: clamp(14px, 4vw, 18px) !important;
    }

    body h6 {
        font-size: clamp(12px, 3.5vw, 14px) !important;
    }
}