/*@Global Variables
===================================== */
:root {
    /*Primatives*/
    --black: #000;
    --dark-gray: #646464;
    --gray: #B7B2B2;
    --light-gray: #E6E4CD;
    --alt-gray: #F9FAFB;
    --white: #ffffff;

    --green:#337A3B;
    --light-green:#C2DFA5;
    --very-light-green:#C2DFA5;

    --yellow:#FBCE2D;
    --light-yellow:#FEFAD1;

    --teal: #84D1C9;
    --tan:#EEE5D1;

    /*Globals*/
    --primary-headings: var(--dark-gray);
    --secondary-headings: var(--dark-gray);
    --body-color: var(--dark-gray);

    --borders: var(--gray);
    --icons: var(--dark-gray);

    --link: var(--green);
    --hover: var(--light-green);
    --bg-hover: var(--light-yellow);
    --focus: var(--teal);

    /*160px*/
    --xxlarge-margin: clamp(6em, 10vw, 10em);

    /*80px*/
    --xlarge-80-margin: clamp(3em, 5vw, 5em);
    
    /*60px*/
    --xlarge-margin: clamp(2em, 3.75vw, 3.75em);
    
    /*48px*/
    --large-margin: clamp(1.75em, 3vw, 3em);
    
    /*32px*/
    --medium-margin: clamp(1.5em, 2vw, 2em);
    
    /*20px*/
    --small-margin: clamp(0.85em, 1.125vw, 1.125em);
    
    /*16px*/
    --xsmall-margin: clamp(0.75em, 1vw, 1em);
    
    /*12px*/
    --xxsmall-margin: clamp(0.65em, 0.75vw, 0.75em);

    /*8px*/
    --xxxsmall-margin: clamp(0.45em, 0.5vw, 0.5em);

    /*4px*/
    --xxxxsmall-margin: clamp(0.125em, 0.25vw, 0.25em);

    /*Fonts*/
    --lead-copy: clamp(1.25rem, 2.75vw, 2.75rem);
    --body-copy: clamp(0.95rem, 1.75vw, 1.6875rem);
    --medium-copy: clamp(0.95rem, 1.25vw, 1.25rem);
    --small-copy: clamp(0.85rem, 0.9vw, 0.9rem);
    --navigation: clamp(1.1rem, 1.75vw, 1.375rem);

    /*Radius*/
    --large-border-radius: 32px;
    --medium-border-radius: 20px;
    --small-border-radius: 8px;


    /*Drop Shadow*/
    --drop-shadow-lg: 0 32px 32px 1px rgba(0, 0, 0, 0.25);
    --drop-shadow-md: 0 16px 16px 1px rgba(0, 0, 0, 0.25);
    --drop-shadow-sm: 0 4px 4px 1px rgba(0, 0, 0, 0.25);
} 
/*@end Global Variables
===================================== */

/*@Text Colors
===================================== */
.black{
	color: var(--black);
}

.dark-gray{
	color: var(--dark-gray);
}

.gray{
	color: var(--gray);
}

.light-gray{
	color: var(--light-gray);
}

.alt-gray{
	color: var(--alt-gray);
}

.white{
	color: var(--white);
}

.teal{
	color: var(--teal);
}

.green{
	color: var(--green);
}

.light-green{
    color: var(--light-green);
}

.yellow{
	color: var(--yellow);
}

.light-yellow{
	color: var(--light-yellow);
}

.tan{
    color: var(--tan);
}

/*@Background Colors
===================================== */
.bg-black{
    background-color: var(--black);
    color: var(--white);
}

.bg-dark-gray{
    background-color: var(--dark-gray);
}
.bg-gray{
    background-color: var(--gray);
}

.bg-light-gray{
    background-color: var(--light-gray);
}

.bg-alt-gray{
    background-color: var(--alt-gray);
}

.bg-white{
	background-color: var(--white);
}

.bg-green{
    background-color: var(--green);
}

.bg-light-green{
    background-color: var(--light-green);
}

.bg-yellow{
    background-color: var(--yellow);
}

.bg-light-yellow{
    background-color: var(--light-yellow);
}

.bg-teal{
    background-color: var(--teal);
}

.bg-tan{
    background-color: var(--tan);
}

/*@Margins
===================================== */

/*Top Margins*/
.xxlarge-top-margin{ 
    margin-top: var(--xxlarge-margin); 
}

.xlarge-80-top-margin{ 
    margin-top: var(--xlarge-80-margin);
}

.xlarge-top-margin{ 
    margin-top: var(--xlarge-margin);
}

.large-top-margin{ 
    margin-top: var(--large-margin);
}

.medium-top-margin{ 
    margin-top: var(--medium-margin);
}

.small-top-margin{ 
    margin-top: var(--small-margin);
}

.xsmall-top-margin{ 
    margin-top: var(--xsmall-margin);
}

.xxsmall-top-margin{ 
    margin-top: var(--xxsmall-margin);
}

.no-top-margin{ 
    margin-top: 0;
}

/*Bottom Margins*/
.xxlarge-bottom-margin{ 
    margin-bottom: var(--xxlarge-margin); 
}

.xlarge-80-bottom-margin{ 
    margin-bottom: var(--xlarge-80-margin);
}

.xlarge-bottom-margin{ 
    margin-bottom: var(--xlarge-margin);
}

.large-bottom-margin{ 
    margin-bottom: var(--large-margin);
}

.medium-bottom-margin{ 
    margin-bottom: var(--medium-margin);
}

.small-bottom-margin{ 
    margin-bottom: var(--small-margin);
}

.xsmall-bottom-margin{ 
    margin-bottom: var(--xsmall-margin);
}

.xxsmall-bottom-margin{ 
    margin-bottom: var(--xxsmall-margin);
}

.no-bottom-margin{ 
    margin-bottom: 0;
}
/*@end Margins
===================================== */


/*@Paddings
===================================== */

/*Top Paddings*/
.xxlarge-top-padding{ 
    padding-top: var(--xxlarge-margin); 
}

.xlarge-80-top-padding{ 
    padding-top: var(--xlarge-80-margin);
}

.xlarge-top-padding{ 
    padding-top: var(--xlarge-margin);
}

.large-top-padding{ 
    padding-top: var(--large-margin);
}

.medium-top-padding{ 
    padding-top: var(--medium-margin);
}

.small-top-padding{ 
    padding-top: var(--small-margin);
}

.xsmall-top-padding{ 
    padding-top: var(--xsmall-margin);
}

.xxsmall-top-padding{ 
    padding-top: var(--xxsmall-margin);
}

.no-top-padding{ 
    margin-top: 0;
}

/*Bottom Paddings*/
.xxlarge-bottom-padding{ 
    padding-bottom: var(--xxlarge-margin); 
}

.xlarge-80-bottom-padding{ 
    padding-bottom: var(--xlarge-80-margin);
}

.xlarge-bottom-padding{ 
    padding-bottom: var(--xlarge-margin);
}

.large-bottom-padding{ 
    padding-bottom: var(--large-margin);
}

.medium-bottom-padding{ 
    padding-bottom: var(--medium-margin);
}

.small-bottom-padding{ 
    padding-bottom: var(--small-margin);
}

.xsmall-bottom-padding{ 
    padding-bottom: var(--xsmall-margin);
}

.xxsmall-bottom-padding{ 
    padding-bottom: var(--xxsmall-margin);
}

.no-bottom-padding{ 
    padding-bottom: 0;
}
/*@end Paddings
===================================== */


/*@Drop Shadows
===================================== */
.drop-shadow-sm{
    box-shadow: var(--drop-shadow-sm);
}

.drop-shadow-md{
    box-shadow: var(--drop-shadow-md);
}

.drop-shadow-lg{
    box-shadow: var(--drop-shadow-lg);
}
/*@end Drop Shadows
===================================== */