body {
    margin: 0;
    font-family: var(--body-font-family);
    color: var(--text-primary-color);
    background-color: var(--background-color);
    font-style: normal;
    font-size: var(--body-font-size);
    font-size: clamp( calc(var(--body-font-size) - 0.2rem), /* min */
    calc(var(--body-font-size) + 0.1vw), /* ideal */
    calc(var(--body-font-size) + 0.3rem) /* max */
    );
}

a.primary,
button.primary {
    background-color: var(--button-primary-color);
    color: var(--button-text-primary-color)
}

    a.primary:hover,
    button.primary:hover {
        background-color: var(--button-primary-color);
        color: var(--button-text-primary-color);
        box-shadow: 0px 3px 9px 0px var(--button-primary-color);
    }

a.secondary,
button.secondary {
    background-color: var(--button-secondary-color);
    color: var(--button-text-secondary-color)
}

    a.secondary:hover,
    button.secondary:hover {
        background-color: var(--button-secondary-color);
        color: var(--button-text-secondary-color);
        box-shadow: 0px 3px 9px 0px var(--button-secondary-color);
    }

a.muted,
button.muted {
    color: var(--text-primary-color);
    background-color: none;
    background: transparent;
    border: 1px solid transparent;
}

a.default,
button.default {
    border: 1px solid rgb(220, 220, 228);
    background: rgb(234, 234, 239);
    color: rgb(102, 102, 135);
}


a.none,
button.none {
    background-color: none;
    color: none;
    border: none
}

a {
    color: var(--text-primary-color);
    color: var(--link-color,#0d6efd);
    text-decoration: none;
}

    a:hover {
        color: var(--link-hover-color);
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }


    a.link {
        color: var(--link-color);
    }

        a.link:hover {
            color: var(--link-hover-color);
            text-decoration: none;
        }



mark, .mark {
    background-color: var(--accent-color);
}


caption {
    color: #6c757d;
    color: var(--text-secondary-color);
}

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



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
}

.h1, h1 {
    font-size: clamp( calc(var(--h1) - 0.75rem), calc(var(--h1) + 0.5vw), calc(var(--h1) + 1rem) );
}

@media (max-width: 570px) {
    .h1, h1 {
       
    }
}

@media (min-width: 1200px) {
    .h1, h1 {
        
    }
}

.h2, h2 {
    font-size: clamp( calc(var(--h2) - var(--h2-min-offset)), calc(var(--h2) + 0.4vw), calc(var(--h2) + var(--h2-max-offset)) );
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: var(--h2)
    }
}

.h3, h3 {
    font-size: clamp( calc(var(--h3) - var(--font-min-offset)), calc(var(--h3) + 0.4vw), calc(var(--h3) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: var(--h3)
    }
}

.h4, h4 {
    font-size: clamp( calc(var(--h4) - var(--font-min-offset)), calc(var(--h4) + 0.4vw), calc(var(--h4) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: var(--h4)
    }
}

.h5, h5 {
    font-size: clamp( calc(var(--h5) - var(--font-min-offset)), calc(var(--h5) + 0.3vw), calc(var(--h5) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h5, h5 {
        font-size: var(--h5);
    }
}

.h6, h6 {
    font-size: clamp( calc(var(--h6) - var(--font-min-offset)), calc(var(--h6) + 0.3vw), calc(var(--h6) + var(--font-max-offset)) );
}

@media (min-width: 1200px) {
    .h6, h6 {
        font-size: var(--h6);
    }
}

.p, p {
    font-size: clamp(1rem, calc(var(--p) + 0.5vw), var(--p));
    font-size: clamp( calc(var(--p) - 0.5vw), calc(var(--p) + 0.2vw), calc(var(--p) + 0.5vw));
}

@media (min-width: 1200px) {
    .p, p {
        font-size: var(--p)
    }
}