@font-face {
	font-family: 'Forum';
	src: url('fonts/Forum-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* PORTFOLIO */
.portfolio-container {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 0% 2.5%;
	flex-shrink: 0;
}

.portfolio-container .project-tile {
	width: calc(33% - 30px);
	aspect-ratio: 17/24;
	margin: 15px;
}

.project-tile a {
	height: 100%;
	display: flex;
	position: relative;
}

.project-tile .tint {
	background-color: rgba(10,10,10,1);
	opacity: 0;
	transition: opacity 0.75s;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 3;
}

.project-tile:hover .tint {
	opacity: 0.5;
}

.project-tile:hover .project-title {
	color: var(--main-text-color)
}

.project-tile .project-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.75s;
}

.project-title {
	text-align: center;
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: transparent;
	font: normal 2.5em "Forum";
	width: 90%;
	transition: color 0.75s;
}

@media screen and (max-width: 900px) {
	.portfolio-container {
		width: 98%;
		margin: 5% 1%;
	}

	.project-tile {
		width: 100% !important;
	}

	.portfolio-container .tint {
		opacity: 0.35;
	}

	.portfolio-container .project-title {
		color: var(--main-text-color);
	}
}