:root {
    /*Primary Colors*/
    --black: #080808;
    --very-dark-gray: #202020;
    --dark-gray: #787878;
    --gray: #AEAEAE;
    --light-gray: #f2f2f2;
    --white: #ffffff;
    

    /*Colors: Headings / Typography*/
    --primary-heading: var(--white);
    --secondary-heading: var(--gray);
    --tertiary-heading: var(--dark-gray);
    --body: var(--white);
    --background: var(--black);

     /*Typography*/
    --lead-copy: clamp(1.25rem, 2vw, 1.75rem);
    --body-copy: clamp(1rem, 1.5vw, 1.125rem);
    --small-copy: clamp(0.85rem, 1.125vw, 0.925rem);
    --navigation: clamp(0.9rem, 1.25vw, 1.125rem);
    
    /*Padding & Margins*/
    /*UI*/
    --borders: var(--dark-gray);
    --links: var(--dark-gray);
    --hover: var(--light-gray);
    --bg-hover: var(--very-dark-gray);
    --active: var(--light-gray);

    /*120px*/
    --xxlarge-margin: clamp(6rem, 7.5vw, 7.5rem);
    
    /*60px*/
    --xlarge-margin: clamp(2rem, 3.75vw, 3.75rem);
    
    /*40px*/
    --large-margin: clamp(1.85rem, 2.5vw, 2.5rem);
    
    /*30px*/
    --medium-margin: clamp(1.275rem, 1.75vw, 1.75rem);
    
    /*20px*/
    --small-margin: clamp(0.85rem, 1.125vw, 1.125rem);
    
    /*16px*/
    --xsmall-margin: clamp(0.75rem, 1vw, 1rem);
    
    /*12px*/
    --xxsmall-margin: clamp(0.55rem, 0.75vw, 0.75rem);
} 

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

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

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

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

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

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

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

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

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

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

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

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

/*@Paddings
===================================== */
/*XX Large*/
.xxlarge-pt{
    padding-top: var(--xxlarge-margin);
}

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

.xxlarge-pl{
    padding-left: var(--xxlarge-margin);
}

.xxlarge-pr{
    padding-right: var(--xxlarge-margin);
}

/*X Large*/
.xlarge-pt{
    padding-top: var(--xlarge-margin);
}

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

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

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

/*Large*/
.large-pt{
    padding-top: var(--large-margin);
}

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

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

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

/*Medium*/
.medium-pt{
    padding-top: var(--medium-margin);
}

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

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

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

/*Small*/
.small-pt{
    padding-top: var(--small-margin);
}

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

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

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

/*XSmall*/
.xsmall-pt{
    padding-top: var(--xsmall-margin);
}

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

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

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

/*XXSmall*/
.xxsmall-pt{
    padding-top: var(--xxsmall-margin);
}

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

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

.xxsmall-pr{
    padding-right: var(--xxsmall-margin);
}
/*@end Paddings
===================================== */

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

/*XX Large*/
.xxlarge-mt{
    margin-top: var(--xxlarge-margin);
}

.xxlarge-mb{
    margin-bottom: var(--xxlarge-margin);
}

.xxlarge-ml{
    margin-left: var(--xxlarge-margin);
}

.xxlarge-mr{
    margin-right: var(--xxlarge-margin);
}

/*X Large*/
.xlarge-mt{
    margin-top: var(--xlarge-margin);
}

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

.xlarge-ml{
    margin-left: var(--xlarge-margin);
}

.xlarge-mr{
    margin-right: var(--xlarge-margin);
}

/*Large*/
.large-mt{
    margin-top: var(--large-margin);
}

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

.large-ml{
    margin-left: var(--large-margin);
}

.large-mr{
    margin-right: var(--large-margin);
}

/*Medium*/
.medium-mt{
    margin-top: var(--medium-margin);
}

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

.medium-ml{
    margin-left: var(--medium-margin);
}

.medium-mr{
    margin-right: var(--medium-margin);
}

/*Small*/
.small-mt{
    margin-top: var(--small-margin);
}

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

.small-ml{
    margin-left: var(--small-margin);
}

.small-mr{
    margin-right: var(--small-margin);
}

/*XSmall*/
.xsmall-mt{
    margin-top: var(--xsmall-margin);
}

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

.xsmall-ml{
    margin-left: var(--xsmall-margin);
}

.xsmall-mr{
    margin-right: var(--xsmall-margin);
}

/*XXSmall*/
.xxsmall-mt{
    margin-top: var(--xxsmall-margin);
}

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

.xxsmall-ml{
    margin-left: var(--xxsmall-margin);
}

.xxsmall-mr{
    margin-right: var(--xxsmall-margin);
}

@media only screen and (max-width: 780px) {
    
    .add-margin-bottom{
        margin-bottom: var(--large-margin);
    }
    

}