:root {
	--strawberry-100: #ff8c82;
	--strawberry-300: #ed5353;
	--strawberry-500: #c6262e;
	--strawberry-700: #a10705;
	--strawberry-900: #7a0000;

	--orange-100: #ffc27d;
	--orange-300: #ffa154;
	--orange-500: #f37329;
	--orange-700: #cc3b02;
	--orange-900: #a62100;

	--banana-100: #fff394;
	--banana-300: #ffe16b;
	--banana-500: #f9c440;
	--banana-700: #d48e15;
	--banana-900: #ad5f00;

	--lime-100: #d1ff82;
	--lime-300: #9bdb4d;
	--lime-500: #68b723;
	--lime-700: #3a9104;
	--lime-900: #206b00;

	--mint-100: #89ffdd;
	--mint-300: #43d6b5;
	--mint-500: #28bca3;
	--mint-700: #0e9a83;
	--mint-900: #007367;

	--blueberry-100: #8cd5ff;
	--blueberry-300: #64baff;
	--blueberry-500: #3689e6;
	--blueberry-700: #0d52bf;
	--blueberry-900: #002e99;

	--bubblegum-100: #fe9ab8;
	--bubblegum-300: #f4679d;
	--bubblegum-500: #de3e80;
	--bubblegum-700: #bc245d;
	--bubblegum-900: #910e38;

	--grape-100: #e4c6fa;
	--grape-300: #cd9ef7;
	--grape-500: #a56de2;
	--grape-700: #7239b3;
	--grape-900: #452981;

	--cocoa-100: #a3907c;
	--cocoa-300: #8a715e;
	--cocoa-500: #715344;
	--cocoa-700: #57392d;
	--cocoa-900: #3d211b;

	--silver-100: #fafafa;
	--silver-300: #d4d4d4;
	--silver-500: #abacae;
	--silver-700: #7e8087;
	--silver-900: #555761;

	--slate-100: #95a3ab;
	--slate-300: #667885;
	--slate-500: #485a6c;
	--slate-700: #273445;
	--slate-900: #0e141f;

	--black-100: #666;
	--black-300: #4d4d4d;
	--black-500: #333;
	--black-700: #1a1a1a;
	--black-900: #000;
}

@font-face {
	font-family: Inter;
	src: url("./fonts/inter.ttf");
}


html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	color: var(--black-500);
	font-family: Inter, sans-serif;
}

a {
	text-decoration: none;
	color: #37d;
}

.portfolio-container {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

/* HEADER */

.portfolio-header {
	display: grid;
	place-items: center;
	background-color: var(--silver-100);
	width: min(100%, 20rem);
	flex-grow: 1;
	height: 100%;
}

.portfolio-header h1 {
	margin-block: 0.5rem;
	padding: 0;
}

.portfolio-header nav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.portfolio-header a {
	display: block;
	height: 1.8rem;
	transform: scale(100%);
	filter: opacity(70%);
	transition: 0.2s;
}

.portfolio-header a:hover {
	transform: scale(110%);
	filter: opacity(100%);
	transition: 0.2s;
}

.portfolio-header a img {
	height: 100%;
	filter: grayscale(100%) brightness(150%);
}

/* MAIN CONTENT */

.portfolio-content {
	min-width: 40%;
	height: 100%;
	overflow-y: hidden;
	flex-grow: 1;
	position: relative;
	overflow-x: hidden;
}

.portfolio-content::before {
	position: absolute;
	inset: 0 0 0 0;
	content: "";
	background-image: url("./images/backdrop-blurred.jpg");
	background-position: center;
	background-size: cover;
}

.projects-container {
	height: 100%;
	overflow-y: scroll;
	flex-grow: 1;
	padding: 3rem;
}

.projects-container:after {
	content: "";
	display: block;
	height: 5rem;
}

/* PROJECT BOX */

.project {
	display: flex;
	margin-inline: auto;
	flex-wrap: wrap;
	background-color: white;
	border-radius: 0.8rem;
	max-width: 45rem;
	overflow: hidden;
	flex-basis: fit-content;
	flex-shrink: 0;
	box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.4);
	background-color: var(--silver-100);
	outline: 2px solid var(--silver-500);
	position: relative;
	margin-bottom: 2rem;
}

.project::before {
	position: absolute;
	content: "";
	inset: 0 0 0 0;
	border-radius: 0.8rem;
	box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.8);
	mix-blend-mode: luminosity;
}

.project-content {
	padding: 1.5rem;
	flex-basis: 20rem;
	flex-grow: 1;
	box-shadow: 0px 0px 40px 50px var(--silver-100);
	display: grid;
	gap: 1rem;
	z-index: 1;
}

.project-content h2 {
	margin: 0;
	padding: 0;
}

.project-content p {
	margin: 0;
	margin-left: 1rem;
	padding: 0;
	line-height: 1.5;
}

.project-links {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 1rem;
	list-style-type: none;
	justify-content: flex-end;
}

.project-links a {
	display: flex;
	gap: 0.2rem;
	align-items: center;
	transition: 0.2s;
	translate: 0 0;
}

.project-links a:hover {
	transition: 0.2s;
	translate: 0 -0.3rem;
}

.project-links img {
	filter: 
		saturate(85%) 
		brightness(1000%)
		hue-rotate(220deg);
}

.project-image {
	background-color: var(--grape-500);
	flex-basis: 10rem;
	flex-grow: 1;
	min-height: 10rem;
}

#galvan-image {
	background-image: url("./images/galvan.jpg");
	background-size: cover;
	background-position: 20% 0%;
}

#kilogramme-image {
	background-image: url("./images/placeholder-2.jpg");
	background-size: cover;
	background-position: 60% 30%;
}

#aqua-image {
	background-image: url("./images/aqua-perspective.jpg");
	background-size: cover;
	background-position: 20% 30%;
}

.project-image img {
	height: 100%;
	width: 100%;
	max-height: 30rem;
}

@media (max-width: 1140px) {
	html, body {
		overflow-y: auto;
	}

	.portfolio-content {
		height: fit-content;
	}
}