/* Home page styles */

main h1 {
	font-family: "Inter", "Arial Narrow Bold", sans-serif;
	font-size: 5em;
	font-style: italic;
	font-weight: 500;
	text-align: center;
	line-height: 50%;
	color: #7e7e7e;
}

footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #7e7e7e;
	text-align: center;
}

/* Showcase flexbox layout */
.projects {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0 auto;
}

a.link-class {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.projects .item1 {
	/*background-image:url('images/ISS.png');*/
	background-image: url("https://birkbeck2.github.io/digital-showcase-2025/floApgImages/sundial.png");
}

.projects .item2 {
	background-image: url("https://birkbeck2.github.io/digital-showcase-2025/images/charitable_home.jpg");
}

.projects .item3 {
	background-image: url("./images/CodeGotchi-1.webp");
}

.projects .item4 {
	background-image: url("./images/Divine Beauty & Aesthetics Logo 2_.png");
}

.projects .item5 {
	background-image: url("./images/vortex.png");
}

.projects .item6 {
	background-image: url("https://images.unsplash.com/photo-1691425751372-75cbd80545ad?q=80&w=2106&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.projects .item {
	background-size: cover;
	background-position: center center;
	min-height: 400px;
	min-width: 400px;
}

.item-info {
	background: rgb(224, 146, 255);
	opacity: 0%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-width: 400px;
	min-height: 400px;
	transition: opacity 1s ease;
}

.item-info:hover {
	opacity: 68%;
}

.item-info h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 550;
	color: #ffffff;
}

.item-info span {
	color: #ffffff;
	font-family: "Inter", "Arial Narrow Bold", sans-serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.25em;
	padding-top: 5px;
}

/* Media queries */
@media screen and (max-width: 900px) {
	main h1 {
		font-size: 3.5em;
	}
	.projects .item {
		min-width: 90%;
		min-height: 500px;
	}
	.item-info {
		min-width: 90%;
		min-height: 500px;
	}
}

@media screen and (max-width: 600px) {
	main h1 {
		font-size: 2.5em;
	}
	.projects .item {
		min-width: 90%;
		min-height: 400px;
	}
	.item-info {
		min-width: 90%;
		min-height: 400px;
	}
}

@media screen and (max-width: 440px) {
	main h1 {
		font-size: 2em;
		line-height: 120%;
	}
}