/*Site header and navigation */

html {
    --header-height: 4.375rem;
    --Neutral-Black-300: #F6F6F6;
    --Neutral-Black-500: #DEDEDE;

    --text-color: #3A4047;

    --brand-color: #520458;
    --brand-color-light: #dcafdfa8;
    --brand-color-dark: #3b073f;
    --header-padding: .5rem 1rem;

    --hover-color: #f6f6f6;
    --site-header-buttons-display: none;
    --site-header-menu-display: none;
    --site-header-toggle-display: flex;
    --overlay-display: block;

    --color-background-dark: #424242;
    --color-background-brand: #520458;
    --color-white: #fff;

    --footer-curve: 100px;

    /* copied from bootstrap */
    --bs-gutter-x: 1.5rem;
    @media screen and (min-width: 800px) {
        --footer-curve: 150px;
    }
    @media screen and (min-width: 1170px) {
        --header-height: 4.625em;
        --header-padding: .5rem 1.75rem;

        --site-header-buttons-display: flex;
        --site-header-menu-display: flex;
        --site-header-toggle-display: none;
        --overlay-display: none;
        --footer-curve: 250px;
    }
}