h1,
h2,
h3,
h4,
h5,
h6,
.button,
.mobile-menu li a,
.footer-menu a {
    font-family: var(--otsikko);
    font-style: normal;
    font-weight: 500;
}

p,
a,
li {
    font-family: var(--leipis);
    font-style: normal;
    font-weight: 300;
}


/* --------- HERO */

.hero-text {
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.hero-text h1 {
    font-size: var(--font-size-xxl);
    color: black;
    margin: 1dvh 0;
}

.hero-text h2 {
    font-size: var(--font-size-l);
    color: black;
    margin: 0.5rem;
}

.hero-text p {
    font-size: var(--font-size-m);
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: black;
}

/* ------------ EXPLAINER */

.explainer-text h1 {
    font-size: var(--font-size-xl);
    font-weight: 100;
    letter-spacing: -0.04vw;
    margin: 0;
    text-align: left;
}

/* KEYWORDS */
.explainer-text h2 {
    font-size: var(--font-size-ml);
    line-height: 1.15;
    margin-bottom: 0rem;
    /* border-bottom: 2px solid black; */
}

/* LONG TEXT */
.explainer-text p {
    font-size: var(--font-size-m);
    line-height: 1.2;
    margin-bottom: 2rem;
    color: black;
}


/* ----------- CTA */

.cta h1 {
    font-size: var(--font-size-ml);
    line-height: 1.2;
    text-align: center;
}

/* --------- SECTION HEADLINE */

.section-headline {
    font-size: var(--font-size-l);
}

/* ----- BUTTONS */

.explainer-read-more-button-container .button {
    width: auto;
    font-size: var(--font-size-xs);
}

/* ---------- MENUS */
nav a,
a.button {
    font-size: var(--font-size-xs);
    text-align: center;
}

#footer p {
    font-size: var(--font-size-s);
}

/* -------------- ARTICLE PREVIEW */

.article-preview-headline h1 {
    margin: 0;
    line-height: 1.4;
    font-size: var(--font-size-m);
}

.article-preview-headline h2 {
    order: 2;
    margin: 0;
    font-size: var(--font-size-s);
}

/* --------- ARTICLE PAGE */

.article-headline-content h1 {
    font-size: var(--font-size-xl);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-align: center;
}

.article-headline-content h5 {
    margin-top: 1rem;
    padding-bottom: 0rem;
    font-size: var(--font-size-m);
    font-weight: 400;
    text-align: center;
}

.article-bodytext-content h1 {
    font-size: var(--font-size-ml);
    line-height: 1.5;
}

.article-bodytext-content h1,
.article-bodytext-content h2,
.article-bodytext-content h3,
.article-bodytext-content h4,
.article-bodytext-content h5,
.article-bodytext-content h6 {
    margin-top: 6vh;
    margin-bottom: 1vh;
}


.article-bodytext-content p,
.article-bodytext-content ol {
    font-size: var(--font-size-s);
    line-height: 1.5;
}

.text-center {
    text-align: center;
}

@media screen and (min-width: 800px) {
    .explainer-text h1 {
        text-align: center;
    }
    
    /* KEYWORDS */
    .explainer-text h2 {
        margin-bottom: 1vh;
    }

    /* LONG TEXT */
    .explainer-text p {
        margin-top: 2rem;
    }
}