:root {
    --font-size: 16px;
    --font-size-h1: 3rem;
    --font-size-h2: 2.1rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1rem;
    --font-size-h5: 0.85rem;
    --font-size-h6: 0.75rem;
    --font-primary: 'ivypresto-display', serif !important;
    --font-secondary: 'Satoshi-Variable', sans-serif !important
}

@media (min-width: 768px) {
    :root {
        --font-size: 20px;
        --font-size-h1: 5rem;
        --font-size-h2: 3rem;
        --font-size-h3: 2.5rem;
        --font-size-h4: 1rem;
        --font-size-h5: 0.85rem;
        --font-size-h6: 0.75rem;
    }
}

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

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}


#masthead, h1, h2, h3, h4, h5, h6, .entry-content :where(h1, h2, h3, h4, h5, h6), p, span, a, .ast-builder-menu-1 .menu-item > .menu-link {
    color: var(--primary);
}

.subtitle {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-family: 15px;
    font-weight: 300;
    letter-spacing: 20%;
}

body, p, a {
    font-family: var(--font-secondary);
    font-weight: 300;
}

h1, h2, .entry-content :where(h1, h2) {
    font-family: var(--font-primary);
    font-weight: 300;
}

h3, h4, h5, h6, .entry-content :where( h3, h4, h5, h6) {
    font-family: var(--font-secondary);
    font-weight: 300;
}

.mix-heading {
    h1, h2, h3, h4, h5, h6 {
        text-transform: uppercase;
        em{
            text-transform: none;
        }
    }
}

p strong {
    font-weight: 700;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

h6 {
    font-size: var(--font-size-h6);
}