/*
	Portfolio page
*/

	body {
		overflow: auto;
		height: auto;
		min-height: 100vh;
		background: #348cb2 url("images/bg.jpg") center bottom/ 100% 35vh no-repeat;
		color: #fff;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		padding: 3em 1.5em;
	}

	#portfolio-header {
		max-width: 760px;
		margin: 1em auto 2.5em auto;
		text-align: center;
		position: relative;
	}

		#portfolio-header h1 {
			font-size: 3em;
			font-weight: 900;
			letter-spacing: -0.035em;
			margin: 0.25em 0 0 0;
		}

		#portfolio-header .back-link {
			display: inline-block;
		}

	/* Create 2 comlumn card layout for projects */
	.projects {
		max-width: 1100px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5em;
	}

	.project {
		position: relative;
		margin: 0 0 1.5em 0;
		padding: 2em; 
		background: rgba(0, 0, 0, 0.35);
		border: solid 1px rgba(255, 255, 255, 0.15);
		border-radius: 6px;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

		.project:hover {
			background: rgba(0, 0, 0, 0.5);
			border-color: rgba(255, 255, 255, 0.3);
		}

		.project h2 {
			font-size: 1.5em;
			font-weight: 900;
			margin: 0 0 0.6em 0;
		}

			.project h2 a {
				color: #fff;
				border-bottom: none;
			}

			.project h2 a::after {
				content: "";
				position: absolute;
				inset: 0;
			}

		.project .tags {
			margin: 0 0 1em 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5em;
		}

			.project .tags li {
				background: rgba(255, 255, 255, 0.15);
				border-radius: 999px;
				padding: 0.25em 0.9em;
				font-size: 0.8em;
				letter-spacing: 0.02em;
			}
		
		.project p {
			margin: 0 0 0.75em 0;
			line-height: 1.6em;
		}
 
		.project p:last-child {
			margin-bottom: 0;
		}
 
		.project-link a {
			position: relative;   
			z-index: 1;
			font-weight: 900;
		}

	.portfolio-footer {
		text-align: center;
		margin-top: 1em;
		opacity: 0.75;
		font-size: 0.9em;
	}

	/* Media Queries */
	@media screen and (max-width: 960px) {
 
		.projects {
			grid-template-columns: 1fr;
		}
	}

	@media screen and (max-width: 736px) {
 
		body {
			padding: 2em 1.25em;
		}
 
		#portfolio-header h1 {
			font-size: 2.5em;
		}
 
		.project {
			padding: 1.5em;
		}
	}