/* This is following Tailwind-style CSS, it is not actually Tailwind but using the same formatting/convention as Tailwind for organizational purposes.
	- How to do it:
		- Use the Tailwind documentation website that has the search feature
		- search for your typical CSS styling 
		- create CSS code on this page if it's not already included following the Tailwind coding convention
	- Why? 
		- Tailwind is an easy-to-use, very popular, and well organized coding convention
*/

@import "typography.css";
@import "flexbox-and-grid.css";
@import "padding.css";
@import "margin.css";

/* Text */
.text-ttu-red {
	color: #c00;
}

.text-ttu-black {
	color: #000;
}


/* Background */

.bg-ttu-red {
	background-color: #C00;
}

.bg-ttu-black {
	background-color: #000;
}

.bg-ttu-cream {
	background-color: #EAE0C6;
}

.bg-ttu-tan {
	background-color: #CB9F5B;
}

.bg-ttu-light-gray {
	background-color: #ccc;
}

.bg-ttu-gray {
	background-color: #ccc;
}

.bg-ttu-dark-red {
	background-color: #900;
}

.bg-ttu-tan {
	background-color: #CB9F5B;
}

.bg-ttu-cream {
	background-color: #EAE0C6;
}

.bg-ttu-dark-gray {
	background-color: #666;
}

/* Layout */
.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

.content-center {
	align-content: center;
}

.content-start {
	align-content: flex-start;
}

.content-end {
	align-content: flex-end;
}

.content-between {
	align-content: space-between;
}

.content-around {
	align-content: space-around;
}

.content-evenly {
	align-content: space-evenly;
}

.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center;
}

.items-baseline {
	align-items: baseline;
}

.items-stretch {
	align-items: stretch;
}

.flex-1 {
	flex: 1 1 0%;
}

.flex-auto {
	flex: 1 1 auto;
}

.flex-initial {
	flex: 0 1 auto;
}

.flex-none {
	flex: none;
}

/* Interactivity */
.cursor-pointer {
	cursor: pointer;
}