/*
Styles for www.tlclemmons.com a resume website.

Elements are standard classes e.g. p, div, h1, h2, etc.

Dark Mode Colors [Default]:
			Background #333		selection-card #222	Text #f0f0f0	Trim @ff4500	Font Arial, sans-serif

list of Selectors:
	html
	body
	div
	ul
	li

	a
	h1
	h2
	h3
	p

	project-video-container
	linkedin-logo

*/



											/*Body*/
body {
	font-family: Arial, sans-serif;
	background-color: #333;
	color: #f0f0f0;
}

h1 {
	background-color: #333;
	color: #007bff;
	transition: background-color 0.80s ease;
	border-bottom: 2px solid #ff4500;
	padding: 0px 2px 0px 6px;
}

h2 {
	background-color: #333;
	color: #007bff;
	transition: background-color 0.80s ease;
	border-bottom: 2px solid #ff4500;
	padding: 0px 2px 0px 6px;
}

h3 {
	background-color: #333;
	color: #ccc;
	transition: background-color 0.80s ease;
	border-bottom: 2px solid #ff4500;
}



/********* Resume Classes *********/
.resume {
	max-width: 800px;
	margin: auto;
	padding: 20px;
	background-color: #222;
	color: #f0f0f0;
	transition: background-color 0.80s ease;
	font-family: Arial, sans-serif;
}

.resume p {			/*This is only used for the profile, email and phone*/
	margin-bottom: 5px;
	line-height: 1.6;
}

.resume ul {
	list-style-type: none;
	line-height: 1.6;
	padding: 0;
	list-style-type: disc;
	list-style-position: inside
}

.resume ul li {
	margin-left: 1%;
	position: relative;
}

.resume-EDU-text {	/*This is for the Education text... Is it needed???*/
	flex-grow: 1;
}



/********* Generic Classes *********/
.video-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.linkedin-logo {
	display: inline-block;
	background-color: #333;
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.3s;
}

.linkedin-logo:hover {
	background-color: #333;
	transition: background-color 0.3s;
}

footer {
	text-align: center;
	font-size: 8px;
	padding: 20px;
	background-color: #333;
	color: #f0f0f0;
	font-family: 'Comic Sans MS';
	transition: background-color 0.80s ease;
}



 /********* List Classes *********/
.list{
	background: #333;
	font-size: 1rem;
	color: #f0f0f0;
	box-shadow: rgba(38, 39, 41, 0.1) 0px 0.15rem 0.5rem, rgba(45, 46, 49, 0.1) 0px 0.075rem 0.175rem;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transition: all 500ms;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #222;
	animation: cardEntrance 700ms ease-out;
	animation-fill-mode: backwards;
}

.container {
	width: 80%;
	margin: auto;
}

.list {
	margin-top: 20px;
	max-height: 500px;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
}

.list-item {
	gap: 1rem;
	background-color: #333;
	border:#222;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	grid-auto-rows: 135px;
	transition: background-color 0.80s ease;
	--stagger-delay: 120ms;
}

.list-item img {
	height: 85%;
	margin: 2.3%;
	max-width: 35%;
	clip-path: circle();
}

.item-details {
	display: flex;
	flex-direction: column;
}

.item-meta {
	display: flex;
	gap: 15px;
}



 /********* Card Classes *********/
.card, .card-cat {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background: #333;
	font-size: 1rem;
	color: #f0f0f0;
	box-shadow: rgba(38, 39, 41, 0.1) 0px 0.15rem 0.5rem, rgba(45, 46, 49, 0.1) 0px 0.075rem 0.175rem;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transition: all 500ms;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #222;
	animation: cardEntrance 700ms ease-out;
	animation-fill-mode: backwards;
}

.card img {
	height: 85%;
	margin: 2.3%;
	max-width: 35%;
	clip-path: circle();
}

.card-cat img  {
	height: 85%;
	margin: 2.3%;
	max-width: 35%;
	clip-path: polygon(
    2% 44%,   /* Left cheek */
    5% 24%,   /* Left jaw */
    7% 9%,    /* Left bottom ear */
    13% 2%,   /* Left ear tip */
    18% 0,    /* Left ear peak */
    22% 4%,   /* Left inner ear */
    29% 18%,  /* Left top head */
    40% 15%,  /* Left forehead */
    50% 12%,  /* Top center (between ears) */
    60% 15%,  /* Right forehead */
    71% 18%,  /* Right top head */
    78% 4%,   /* Right inner ear */
    82% 0,    /* Right ear peak */
    87% 2%,   /* Right ear tip */
    93% 9%,   /* Right bottom ear */
    95% 24%,  /* Right jaw */
    98% 44%,  /* Right cheek */
    92% 60%,  /* Right lower face */
    80% 76%,  /* Right bottom curve */
    66% 90%,  /* Right bottom curve */
    50% 95%,  /* Chin */
    34% 90%,  /* Left bottom curve */
    20% 76%,  /* Left bottom curve */
    8% 60%    /* Left lower face */
	); 
}

.card:hover, .card-cat:hover {
	box-shadow: rgba(30, 30, 30, 0.4) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
	transform: translateY(-3px) scale(1.1);
}

.animated-grid {
	display: grid;
	gap: 1rem;
	background: #333;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	grid-auto-rows: 135px;
	transition: background-color 0.80s ease;
	--stagger-delay: 120ms;
}

.animated-grid-blog-post {
	display: grid;
	font-size: 20px;
	grid-template-columns: repeat(4, 20%);
	grid-template-rows: auto;
	gap: 1rem;
	--stagger-delay: 50ms;
	justify-content: center;
	grid-template-areas:
	'1  body body 2'
	'3  body body 4'
	'5  body body 6'
	'7  body body 8'
	'9  body body 10'
	'11 body body 12';
}

.project-card {
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: flex-start;
	background: #333;
	font-size: 1rem;
	color: #f0f0f0;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transition: all 500ms;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: cardEntrance 700ms ease-out;
	animation-fill-mode: backwards;
}

.project-card img {
	align-self: center;
	justify-content: center;
	height: fit-content;
	margin: 0;
	max-width: 100%;
}

@keyframes cardEntrance {
	from {
		opacity: 0;
		transform: scale(0.3);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes cardEntranceColor {
	from {
		opacity: 0;
		transform: scale(0.3);
		filter: hue-rotate(359deg);
	}
	to {
		opacity: 1;
		transform: scale(1);
		filter: hue-rotate(0deg);
	}
}

.card-body {
	grid-area: body;
}

.project-card:nth-child(1) {
	animation-delay: calc(1 * var(--stagger-delay));
	grid-area: 1;
}
.project-card:nth-child(2) {
	animation-delay: calc(2 * var(--stagger-delay));
}
.project-card:nth-child(3) {
	animation-delay: calc(3 * var(--stagger-delay));
}
.project-card:nth-child(4) {
	animation-delay: calc(4 * var(--stagger-delay));
}
.project-card:nth-child(5) {
	animation-delay: calc(5 * var(--stagger-delay));
}
.project-card:nth-child(6) {
	animation-delay: calc(6 * var(--stagger-delay));
}
.project-card:nth-child(7) {
	animation-delay: calc(7 * var(--stagger-delay));
}
.project-card:nth-child(8) {
	animation-delay: calc(8 * var(--stagger-delay));
}
.project-card:nth-child(9) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:nth-child(10) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:nth-child(11) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:nth-child(12) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:nth-child(13) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:nth-child(14) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.project-card:last-child {
	animation-delay: calc(13 * var(--stagger-delay));
}

.card:nth-child(1) {
	animation-delay: calc(1 * var(--stagger-delay));
}
.card:nth-child(2) {
	animation-delay: calc(2 * var(--stagger-delay));
}
.card:nth-child(3) {
	animation-delay: calc(3 * var(--stagger-delay));
}
.card-cat:nth-child(4) {
	animation-delay: calc(4 * var(--stagger-delay));
}
.card:nth-child(4) {
	animation-delay: calc(4 * var(--stagger-delay));
}
.card:nth-child(5) {
	animation-delay: calc(5 * var(--stagger-delay));
}
.card:nth-child(6) {
	animation-delay: calc(6 * var(--stagger-delay));
}
.card:nth-child(7) {
	animation-delay: calc(7 * var(--stagger-delay));
}
.card:nth-child(8) {
	animation-delay: calc(8 * var(--stagger-delay));
}
.card:nth-child(9) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(10) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(11) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(12) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(13) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(14) {
	animation-delay: calc(9 * var(--stagger-delay));
}
.card:last-child {
	animation-delay: calc(13 * var(--stagger-delay));
}