:root {
	--blue: #2A85EF;
	--blue-medium: #9CDDEF;
	--brown: #3A0E11;
	--brown-medium: #895342;
	--brown-light: #F9F7E0;
	--green-medium: #C1F4E7;
	--orange: #EF8100;
	--pink: #E63F82;
	--pink-medium: #F581B0;
	--pink-light: #FFC1DA;
	--purple: #7029B2;
	--purple-medium: #CDA8EF;
	
	--yellow: #ffd939;
	--black: #191717;
	
	
	--red: #361000;
	--mid-grey: #424D51;
	--slate-grey: #1B1E1D;
	--green: #2F2D19;
	--white-oak: #9B8967;
	--soft-white: #EFEDE9;
	
	--dark-red: #2A0A00;
	--dark-green: #2A2717;
	
}

/* SOLIDS */

.slate-grey {
	background-color: var(--slate-grey);
}

.mid-grey {
	background-color: var(--mid-grey);
}

.soft-white {
	background-color: var(--soft-white);
	color: var(--slate-grey);
}

.red {
	background-color: var(--red);
}

.white-oak {
	background-color: var(--white-oak);
	color: var(--soft-white) !important;
}

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




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


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

.blue {
	background-color: var(--blue);
	color: var(--brown-light);
}

.blue-medium {
	background-color: var(--blue-medium);
	color: var(--brown);
}

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

.brown-medium {
	background-color: var(--brown-medium);
	color: var(--brown-light);
}

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

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

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

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

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

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

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

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

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

/* LINKS */

a {
	color: var(--pink);
}

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

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

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

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

/*TAGS*/


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

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

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




/* GRADIENTS */

.birthday-cake {
	background: linear-gradient(90deg, var(--blue) 0%, var(--pink-medium) 50%, rgba(252,246,185,1) 100%);
	color: var(--brown-light);
}

.chocolate-glazed {
	background: linear-gradient(90deg, var(--purple) 0%, var(--pink) 100%);
	color: var(--brown-light);
}

.blueberry-cobbler {
	background: linear-gradient(90deg, var(--purple) 0%, var(--blue-medium) 100%);
	color: var(--brown-light);
}

.cookies-and-cream {
	background: linear-gradient(90deg, var(--blue) 0%, var(--brown-light) 100%);
	color: var(--brown);
}

.glazed-cinnamon-roll {
	background: linear-gradient(90deg, var(--green) 0%, var(--brown-light) 100%);
	color: var(--brown);
}

.chocolate-cookie-monster {
	background: linear-gradient(90deg, var(--blue) 0%, var(--blue-medium) 100%);
	color: var(--brown-light);
}

.banana-nut {
	background: linear-gradient(90deg, var(--orange) 0%, var(--yellow) 100%);
	color: var(--brown);
}

.pumpkin-spice {
	background: linear-gradient(90deg, var(--purple) 0%, var(--orange) 100%);
	color: var(--brown-light);
}

.peanut-butter-candy-crunch {
	background: linear-gradient(90deg, rgba(190,1,79,1) 0%, var(--yellow) 100%);
	color: var(--brown-light);
}

.cookie-dough-bites {
	background: linear-gradient(90deg, rgba(214,1,1,1) 0%, var(--brown-light) 100%);
	color: var(--brown-light);
}