:root{
    /* common layout */
    --width-container: 1200px; /* .container:width */
    --width-content: 1200px; /* #content:width */
    --width-content-page-nosidebar: 810px; /* body.no-sidebar .entry-content:width */
    --padding-content:3.5vw 0;
    --width-sidebar:360px; /* #sidebar:width */
    --padding-col-unit: 15px; /* unit used in any further cols */
    --mrgnbottom-col-unit: calc(2 * var(--padding-col-unit)); /* margin bottom on col */
    --padding-sidebar-desktop:80px; /* padding between #main & #sidebar. screens >1200px */
    --padding-separator:4rem; /* default padding for block like : .nav-links ; .btn-container ; hr */

    /* common typography */
    --fntfamily-body:'Open Sans', sans-serif;
    --fntsize-body:1.6rem; /* backup var for common <p><ul><ol> etc font-size */
    --lnheight-body: 1.5;
    --color-body: #222;
    --color-btn-contrast: #373737;
    --fntfamily-title:'Raleway', sans-serif;
    --fntweight-title: 700; /* default h-tags & other titles */
    --color-title:inherit;
    /*--color-link:#e4022d; !* common a *!*/
    /*--color-link-hover:#c9022c; !* common a:hover *!*/
    --color-link:#8cb224; /* common a */
    --color-link-hover: #66851a; /* common a:hover */
    --color-active-elem:var(--color-link); /* .current-menu-item ; .nav-links .current ;  etc */
    --color-active-elem-parent: var(--color-link); /* .current-cat-ancestor ; .current-menu-parent ; etc */
    --color-white: #fff;
    --color-separator: #e2e2e2; /* border-color : #sidebar .widgetlist ; .nav-links ; #comments ; .wp-block-separator ; table border ; etc */
    --color-emphasize:#f4f4f4; /* color to highlight info. Example: bgcolor blockquote ; table.stripes ; .more-post-links .icon bg ;  */
    --color-underemphasize:#cbcbcb; /* not to distract color. Example: figcaption ; cite ;  */
    --transduration-body: .3s;
    /*--featured-gradient:linear-gradient( 0, rgb(67,2,14) 0%, rgb(146,2,32) 44%, rgb(225,2,49) 100%); !* blockquote ; contact-city shortcode *!*/
    /*--featured-gradient:linear-gradient( 0, rgb(67, 78, 40) 0%, rgb(112, 123, 60) 44%, rgb(143,177,88) 100%); !* blockquote ; contact-city shortcode *!*/
    --featured-gradient:linear-gradient( 0, rgb(73, 88, 18) 0%, rgb(110, 137, 28) 44%, rgb(140,178,36) 100%); /* blockquote ; contact-city shortcode */

    /* #musthead[site-header] */
    --bgcolor-musthead:transparent;
    --fntsize-musthead: var(--fntsize-body);
    --bgcolor-mainnav:var(--color-white);
    --fntsize-mainnav: var(--fntsize-musthead);
    --color-mainnav: inherit;
    --color-mainnav-hover:var(--color-link-hover);
    --padding-mainnav-a:1em .8em;
    --fntsize-mainnav-sbmenu: var(--fntsize-musthead);
    --color-mainnav-sbmenu: inherit;
    --color-mainnav-sbmenu-hover:var(--color-link-hover);
    --padding-mainnav-sbmenu-a:.5em 1em;
    --bgcolor-mainnav-sbmenu:whitesmoke;

    /* .site-footer */
    --padding-footer: 70px 0 0;
    --color-footer:var(--color-white);
    --color-link-footer:var(--color-white);
    --color-link-footer-hover:var(--color-link-hover);
    --bgcolor-footer:#0e0d15;
    --fntsize-footer:.8125em;
    --fntsize-footer-wtitle:var(--fntsize-body);
    --width-footer-col:200px;

    /* #sidebar */
    --fntsize-sdbar: var(--fntsize-body);
    --fntsize-sdbar-wtitle:1.125em;
    --color-sdbar:var(--color-body);
    --color-link-sbbar:var(--color-body);
    --color-link-sdbar-hover:var(--color-link-hover);
    --mrgnbottom-widget:3rem;


    /* common styles */
    --fntsize-page-title:5.4rem;
    --padding-page-header:60px;
    --fntsize-block-title:5.4rem;
    --padding-block-space: 4.5vw; /* blocks like : on Home ; #comment ; etc */

    /* archive pages */
    --fntsize-loop: calc(.875 * var(--fntsize-body));
    --lnheight-loop: 1.35;
    --padding-listing-unit: var(--padding-col-unit);
    --mrgnbottom-listing-unit: calc(2 * var(--padding-listing-unit));
    --mrgnbottom-listing-thumb: 56.25%;
    --fntsize-loop-title:1.285em;
    --lnheight-loop-title:1.2;
    --lnclamp-loop-title:2;


    /* .page-content */
    --fntsize-pgcontent: var(--fntsize-body);
    --margin-gtnblock:2em; /* unit for [.page-content > *] margins */


    /* social icons */
    --fntsize-social: 2rem;
    --color-social: var(--color-body);
    --padding-social: .2em;
    --bgcolor-social:transparent;
    --color-social-hover:var(--color-link-hover);
    --bgcolor-social-hover:transparent;

    /* btn */
    --fntsize-btn: .875em;
    --fntweight-btn:600;
    --txttransform-btn:none;
    --color-btn:var(--color-btn-contrast);
    --bgcolor-btn:var(--color-body);
    --padding-btn:1em;
    --margin-btn:4px;
    --border-btn:2px solid;
    --minwidth-btn:230px;
    --transproperty-btn: color, background-color, border;
    --color-btn-hover:var(--color-body);
    --bgcolor-btn-hover:var(--color-link-hover);

    /* <form> elements */
    --fontsize-form:1.6rem;
    --bgcolor-form:transparent;
    --padding-form:0;
    --margin-form: var(--margin-gtnblock) 0;
    --mrgnbottom-form-block:15px;
    --color-input:inherit;
    --color-label:inherit;
    --bgcolor-input:#e8e8e8;
    --padding-input:1em 1.25em;
    --border-input: 1px solid var(--bgcolor-input);
    --color-input-placeholder:#989898;
    --focus-bxshadow-input:0 20px 45px 5px rgba(0, 0, 0, 0.1);
    --focus-border-input: var(--color-link-hover);
    --color-form-error:#fe5e2f;
    --color-form-success:#fea02f;
}
/**
 * css variables to use on the site
 */
@media (max-width: 991px) {
    :root{

        /* .site-footer */
        --width-footer-col:50%;
    }
}

@media (max-width: 768px) {
    :root {
        /* common layout */
        --padding-content:50px 0;
        --padding-separator: 2.5rem;

        /* common styles */
        --fntsize-page-title:2.4rem;
        --padding-page-header:35px;
        --fntsize-block-title:2.4rem;
        --padding-block-space: 50px;

        /* .site-footer */
        --padding-footer: 30px 0 0;

        /* <form> elements */
        --padding-input:.8em 1em;
        --mrgnbottom-form-block:10px;

    }
}

@media (max-width: 575px) {

    :root{

        /* .site-footer */
        --width-footer-col:100%;

        /* archive pages */
        --padding-listing-unit:5px;

        /* btn */
        /*--minwidth-btn:unset;*/
        --padding-btn:1em;

        /* <form> elements */
        --margin-form: var(--margin-gtnblock) calc(-1 * var(--padding-col-unit));
    }
}