/*------------------------------------*\
    
    CSS Custom Properties (aka CSS Variables)
 
    Custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document
    Example usage: brand colors, common margins, drop-shadows, border styles, and more!

\*------------------------------------*/


/**
 * Global Variables (Optional - Remove anything that's not being used)
 */

 :root {
    --section-margins: 70px; 

    /*colors*/
    --color-primary-dark: #444318;
    --color-secondary-dark: #2B2C01;
    --color-accent: #8A7A4A;
    --color-background: #E6DFC7;
    --color-foreground: #D2C9AF;
    --color-grey: #B7B9A5;
    --color-link: #6F6A3A;
}

@media (min-width: 768px) {
    :root {
        --section-margins: 80px; 
    }
}

@media (min-width: 1025px) {
    :root {
        --section-margins: 100px;
    }
}