:root {
    --black: #000000;
    --dark-gray: #646464;
    --gray: #B7B2B2;
    --light-gray: #FAF3F3;
    
    --purple: #801A92;
    --orange: #FF9500;
    --yellow: #FFCC00;
    --very-light-yellow: #FFF6E3;
    --teal: #00B4A0;
    --light-teal: #84D1C9;
    --tan: #E1DDD5;
    --light-tan: #F7EEE9;

    --white: #ffffff;
    --light-borders: #ddd;
    --borders: #757575;
    --hover: #00B4A0;
    
    
    --top-bottom-margins: clamp(4.25em, 9.5vw, 10em);
    --side-margins: clamp(2em, 4vw, 4.5em);
    --border-radius:20px;
} 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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