/* ==[ Text at Top of Page ]== */
.heading-text-container {
	display:flex;
	width:100%;
	margin:10px auto;
	justify-content:center;
	align-items:center;
}
.heading-text {
	position:relative;
	display:inline-block;
	padding:10px 0 10px 10px;
	font-size:11px;
	max-width:50%;
	color:#9ca3af;
	border:1px solid rgba(0,0,0,0.5);
	border-radius:16px;
}
.heading-text ul {
	position:relative;
	display:grid;
	margin:5px auto;
	max-width:60%;
	grid-template-columns:repeat(2,1fr);
	gap:2px 20px;
}
.heading-text ul li {
	list-style:disc;
	padding:0;
	margin:0;
}
.heading-text ul li::marker {color:#38bdf8;}

/* ==[ External Container for all Projects ]== */
.project-shell {width:100%;}

/*Heading for Catagories of Project*/
.project-header {
	padding:0 2px;
	backdrop-filter:blur(22px);
 	margin-top:20px;
	color:#38bdf8;
 	text-transform: uppercase;
 	letter-spacing: 0.22em;
 	font-size:11px;
}

/* ==[ Individual Project Container ]== */
project {
	position:relative;
	display:grid;
	padding-top:10px;
	margin:10px 20px;
	border-top:1px solid rgba(128,128,128,0.5);
	grid-template-columns:100px minmax(0,calc(100% - 100px));
	gap:16px;
  	transition: 
  		all 0.6s cubic-bezier(0.3, 0.2, 0.2, 1),
  		background-color 0.6s ease-in-out,
		padding 0.6s ease-in-out,
		margin-bottom 0.6s ease-in-out;
}
.project-title { 										/*Title for each project*/
	display:inline-block;
	font-size: 16px;
	font-weight: 500;
	color: #f9fafb;
	margin-bottom: 6px;
}
project .project-imageContainer {						/*Image for each project*/
	display:flex;
	justify-content:center;
}
project .project-image {		
	min-height:67px;
	max-height:67px;
	min-width:100px;
  transition: all 0.6s cubic-bezier(0.3, 0.2, 0.2, 1);
}
project p {												/*Description text for each project*/
	opacity:0;
	height:0;
	color:#9ca3af;
	font-size:12px;
	transition: all 0.6s cubic-bezier(0.3, 0.2, 0.2, 1);
}

/* ==[ Expand or Contract Project for Viewing ]== */
.p_btnStateContainer, .p_btnStateContainer_ar {			/*Expand/Contract Button*/
	position:absolute;
	top:0;
	font-size:14px;
	color:#38bdf8;
}
.p_btnStateContainer {right:5px;}
.p_btnStateContainer_ar {left:5px;}
.p_btnChgState::before {
	content:"\25bc";
	cursor:pointer;
}
project.expand .project-imageContainer {justify-content:flex-start;}
project.expand .p_btnChgState::before {content:"\25b2";}
project.expand {
	grid-template-columns:40% 60%;
	padding:10px 5px 10px 10px;
	margin-bottom:50px;
	background-color:rgba(255,255,255,0.15);
}
project.expand p {
	opacity:1;
	height:auto;
}
project.expand .project-image {max-height:initial;}

/* ==[ Page Length spacer to Make Project always Open at Top of Page ]== */
.project-footer-spacer {
	position:realtive;
	height:50px;
	margin-top:320px;
}

@media (max-width:600px) {
	.heading-text {margin:0 1%;width:98%;max-width:98%;}
	.heading-text ul {max-width:90%;gap:2px 10px;}
	.project-header {margin-right:0;}
	.project-footer-spacer {margin-top:430px;}
	project {margin:10px 0;}
	project.expand {grid-template-columns:calc(100% - 25px);}
}