:root {
    --black: #000000;
    --dark-gray: #666666;
    --gray: #9a9a9a;
    --light-gray: #cccccc;
    --white: #ffffff;
    --tan: #EFEBDE;
    --light-tan: #F9F8F4;
    --pink: #FF6666;
    --light-pink: #ff8585;

    --primary-heading: var(--black);
    --secondary-heading: var(--dark-gray);
    --tertiary-heading: var(--pink);
    --hover: var(--light-pink);
    --borders: var(--light-gray);

    /*120px*/
    --xxlarge-margin: clamp(4rem, 7.5vw, 7.5rem);

    /*80px*/
    --xmlarge-margin: clamp(3rem, 5vw, 5rem);
    
    /*60px*/
    --xlarge-margin: clamp(2.75rem, 3.75vw, 3.75rem);
    
    /*40px*/
    --large-margin: clamp(2.25rem, 2.5vw, 2.5rem);
    
    /*30px*/
    --medium-margin: clamp(1.5rem, 1.75vw, 1.75rem);
    
    /*20px*/
    --small-margin: clamp(1rem, 1.125vw, 1.125rem);
    
    /*16px*/
    --xsmall-margin: clamp(0.85rem, 1vw, 1rem);
    
    /*12px*/
    --xxsmall-margin: clamp(0.65rem, 0.75vw, 0.75rem);

    /*6px*/
    --xxxsmall-margin: clamp(0.35rem, 0.55vw, 0.55rem);

    /*Fonts*/
    --small-copy: clamp(0.75rem, 0.875vw, 0.875rem);
    --navigation: clamp(0.9rem, 1vw, 1rem);

    /*Radius*/
    --large-border-radius: 32px;
    --medium-border-radius: 12px;
    --small-border-radius: 6px;
    
} 

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

.padding-bottom-0{
    padding-bottom: 0 ;
}


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

.xmlarge-top-margin{
    margin-top: var(--xmlarge-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;
}

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

.xmlarge-bottom-margin{
    margin-bottom: var(--xmlarge-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;
}

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

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

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

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

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

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

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

.pink,
.pink strong{
	color: var(--pink) !important;
}

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

.primary-heading{
    color: var(--primary-heading);
}

.secondary-heading{
    color: var(--secondary-heading);
}

.tertiary-heading{
    color: var(--tertiary-heading);
}


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

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

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

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

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

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

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

.border-radius-14{
	border-radius: 14px;
	overflow:hidden;
}