/*General Styling*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	height: 100%;
}
body{
	width: 100%; /*Remove horizontal margins from parent element*/
	height: 100%; /*Remove vertical margins from parent element*/
	font-size: clamp(18px, 3vh, 32px);
	background-color: lightgray;
	display: flex; /*Structures the content to fit in a flexbox*/
	flex-direction: column; /*Structures the flexbox's content vertically*/
	
	/*Color*/
	background-color: #303030;
}
header, footer{
	min-height: 10%;	
	width: 100%;
	background-color: #00502f;
	text-color: white;
}
main{
	flex: 1; /*Extends the content to fit the size of the screen if the content is too little*/
}
nav{
	display: flex;
	justify-content: horizontal;
	align-items: center;
	height: 100%;
}
a{
	text-decoration: none;
	font-weight: bold;
}
a:link{
	color: white;
}
a:visited{
	color: white;
}
a:hover{
	color: lightgray;
}
a:active{
	color: white;
}
summary:hover{
	color: lightgray;
}
.main-container{
	padding: 2%; /*Add padding from header/footer and left/right*/
	width: 95%;
	max-width: 2500px;
	margin: 0 auto;
	gap: 2%;
}
.game-programming-link{
	margin-right: auto;
	padding-left: 5%;
}
.game-programming-link img {
    max-width: clamp(50%, 10vw, 80%);
    height: auto;
    display: block;
}
.archive-links{
	padding-right: 5%;
	color: white;
}
.dropdown{
	color: white;
	padding-left: 1%;
	margin-left: 3%;
	margin-right: 3%;
	background-color: #00502f;
	border-radius: 3%;
}
.dropdown-content{
	margin-left: 1%;
	margin-right: 1%;
}

/*Landing Page Styling*/
.intro-card{
	background-color: #00502f;
	color: white;
	font-size: clamp(18px, 3vh, 32px);
	padding: 1%;
	margin-left: 3%;
	margin-right: 3%;
}
.project-highlights{
	padding-bottom: 40%; /*increase this as necessary to make the footer fit below this element*/
	/*Sort the elements in a grid-like structure*/
	display: grid;
	grid-template-columns: repeat(2, 1fr); /*Creates two columns, each taking up 1 'fractional unit' of the column's space*/
	gap: 4% 2%; /*Adds spacing between the rows and columns, respectively*/
	place-items: center;
}
.project-highlight-card{
	/*The card needs to display the text and image in a flex colum*/
	display: flex;
	flex-direction: column;
	background-color: #00502f;
	padding: 1%;
	height: 80%;
	aspect-ratio: 3 / 4;
	gap: 1%;
	border-radius: 3%;
}
.project-highlight-card:nth-child(even){ /*enforces this style on every other card using project-highlight-card style*/
	transform: translateY(50%); /*If the card is an even number, then it gets pushed down along the grid, creating a zig-zag pattern across the grid*/
}
.project-highlight-card h3{
	text-align: center;
}
.project-highlight-card img{
	/*The card's image must fill up the remaining space of the card*/
	flex; 1;
	width: 100%; /*prevent the image from overriding the grid's width*/
	height: 100%;
	object-fit: cover;
	padding: .5%;
	border-radius: 3%;
}
.intro-card h1 {
	margin-bottom: 1rem;
	font-size: clamp(24px, 4vh, 48px);
}

.intro-card p {
	margin-bottom: 1rem;
}

.project-highlights h2 {
	grid-column: 1 / -1;
	color: white;
	text-align: center;
	font-size: clamp(24px, 4vh, 48px);
	margin-top: 2rem;
	margin-bottom: 1rem;
}

/*Project Page Styling*/
.semesters{
	display: flex;
	flex-direction: column;
}


.semester-metadata{
	margin-bottom: 2%;
}
.semester-metadata h1{
	color: #3FBA81;
	font-size: clamp(18px, 3.5vw, 32px);
}
.semester-metadata button{
	background-color: #0B4D04;
	color: white;
	width: clamp(18px, 12vw, 512px);
	height: clamp(18px, 4vh, 512px);
	font-size: clamp(5px, 1.3vw, 32px);
	border-radius: 10%;
}
.semester-metadata button:hover{
	background-color: #0F7007;
}
.project-content{
	flex-direction: column;
	background-color: #00502f;
	gap: 1%;
	border-radius: 3%;
	
	/*Fade in settings*/
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	position: absolute;
	pointer-events: none;
}

.project-content.active{
	/*Fade in effect setup*/
	opacity: 1;
	visibility: visible;
	transform: translateY(0); /*Causes an upward movement while fading in*/
	position: relative;
	pointer-events: auto;
	animation: fadeIn 0.25s ease; /*Used with keyframe setup (see below)*/
}

@keyframes fadeIn{
	from{
		opacity: 0;
		transform: translateY(10px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

.semester-container{
	position: relative;
}

.project-upper-content{
	margin: 2%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}
.project-upper-content p{
	font-size: clamp(5px, 1.3vw, 32px);
}

.project-metadata{
	flex: 6;
	color: white;
}
.project-metadata h1{
	font-size: clamp(24px, 5vh, 48px);
	margin-left: 4%;
}
.project-metadata ul{
	list-style-type: none;
	margin-left: 4%;
}

.project-image{
	flex: 4;
	margin-left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.project-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	border-radius: 5%;
}
.project-content.active{
	display: flex;
}
.project-deliverables{
	margin: 2% 2%;
	color: white;
	
}

.project-content h1{
	font-size: clamp(6px, 2vw, 96px);
}

.project-content ul, p{
	font-size: clamp(5px, 1.3vw, 32px);
}

.project-content hr{
	margin: 2% 2%;
}
.semester-course-projects{
	/*Sort the elements in a grid-like structure*/
	display: grid;
	grid-template-columns: repeat(3, 1fr); /*Creates three columns, each taking up 1 'fractional unit' of the column's space*/
	gap: 1rem;
	justify-items: stretch;
	align-items: start;
	margin-bottom: 4%;
}