@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
	--text-light: #ebebeb;
	--color0: #cc95f3;
	--color1: #dda2da;
	--color2: #e886ba;
	--color3: #eeac79;
	--color4: #9fc0e4;
	--gradient: linear-gradient(150deg,
			var(--color1),
			var(--color2),
			var(--color3));

	--color-main: #050213;
	--color-second: #d81b1b;
	--gradient2: linear-gradient(150deg, var(--color-second), var(--color3));
	--gradient3: linear-gradient(150deg, var(--color3), var(--color0), var(--color4));
}

::selection {
	background-color: var(--color3);
}

html {
	scroll-behavior: smooth;
	font-family: 'Kode Mono';
	font-family: 'VT323', monospace;
	font-family: 'Fredoka', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	max-width: 100vw;
	overflow-x: hidden;
	color: var(--text-light);
}

h1 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.center {
	display: inline-block;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.emphasize {
	background-image: var(--gradient);
	border-radius: 20px;
	padding: 0.1rem 0.3rem;
	font-weight: 400;
	color: var(--color-main);
}

.emphasize-less {
	color: var(--color3);
	background-image: var(--gradient);
	background-clip: text;
	color: transparent;
	font-weight: 400;
}

.rel {
	position: relative;
}

#div-photo {
	transform-origin: top left;
	width: 60%;
	z-index: 2;

	img {
		height: 100%;
		width: 100%;
		filter: brightness(.9);
		animation: shake 4s 2s infinite both, zoomIn 2s ease-out;
	}

	/* &.active {
		transform: translateY(-50%) rotate(-10deg) scale(1);
	} */
}

section {
	/* min-height: 100vh; */
	padding-top: 4rem;
	margin-bottom: -3rem;
	padding-inline: 4vw;

	&:first-child {
		padding-top: 6rem;
	}

	&:last-of-type {
		padding-bottom: 5rem;
	}

	h1 {
		display: inline-block;
		width: 100%;
		/* color: var(--color3); */
		font-size: 3rem;
		color: transparent;
		text-stroke: 1px var(--text-light);
		-webkit-text-stroke: 1px var(--text-light);
		font-family: 'VT323', monospace;
		text-transform: uppercase;
		/* margin-left: 50%; */
		/* transform: translateX(-50%); */
		/* font-size: 2rem; */
		letter-spacing: .2rem;
		text-align: center;
	}
}

#particles-js {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(rgba(19, 10, 56, 0.6), rgba(19, 10, 56, 0.6)),
		url('../assets/notes.jpg');
	/* background-image: linear-gradient(90deg, rgb(169, 227, 253) 0%, #100931 10%, #100931 90%, rgb(169, 227, 253)); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: -1;
}

.wrapper {
	position: relative;
	/* z-index: -2; */
	width: 80vw;
	/* padding-inline: 5vw; */
	margin-inline: auto;
	background-image: linear-gradient(rgba(6, 4, 29, 0.8), rgba(6, 4, 29, 0.5));
	/* background-color: var(--color-main); */
}

nav {
	width: 100vw;
	position: fixed;
	top: 0;
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'VT323', monospace;
	font-size: 1.25rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	background-color: rgba(16, 9, 49, 1);
	background-color: rgba(6, 4, 29, 1);
	color: var(--text-light);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	z-index: 101;
	box-shadow: 0 0 10px 5px var(--color3);

	.div-logo-flex {
		/* // width: 100%; */
		display: flex;
		align-items: center;

		#div-logo {
			height: 2rem;
			margin-right: 1rem;

			img {
				height: 100%;
			}
		}
	}

	ul {
		display: flex;

		&.flex-wrapper {
			justify-content: flex-end;
		}

		a {
			text-decoration: none;
		}

		li {
			position: relative;
			list-style: none;
			color: var(--text-light);
			padding: 0.5rem 1rem;
		}

		li::after {
			content: attr(data-text);
			font-style: italic;
			position: absolute;
			top: 50%;
			left: 50%;
			transform-origin: bottom;
			transform: translate(-50%, -100%) rotateX(180deg) scale(0);
			line-height: 0.85em;
			background-image: linear-gradient(0deg,
					var(--text-light) 0,
					transparent 98%);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
			opacity: 0.7;
			transition: all 0.1s;
		}

		li:hover::after {
			transform: translate(-50%, -50%) rotateX(180deg);
		}

		a:not(:last-child) {
			border-right: 1px solid var(--text-light);
		}
	}

	.resume-link {
		border: 3px solid var(--color3);
		border-radius: 10px;
		/* // letter-spacing: 4px; */
		color: var(--color3);
		padding: 0.5rem 1rem;
		text-decoration: none;
		transition: all 0.1s;

		&:hover {
			background-color: var(--color3);
			color: var(--color-main);
		}
	}

	.mobile-menu-btn {
		display: none;
		margin-left: 1rem;
		margin-right: .5rem;

		&:hover {
			cursor: pointer;
		}

		i {
			font-size: 1.5rem;
		}
	}
}

.mobile-container {
	width: 100vw;
	margin: auto;
	position: fixed;
	top: 4rem;
	z-index: 100;
	/* padding: 2rem; */
	/* margin-top: 3.5rem; */
	/* background-color: #0d1d54; */
	height: auto;
	color: white;
	border-radius: 10px;
}

.topnav {
	overflow: hidden;
	background-color: var(--color3);
	position: relative;
}


.topnav #myLinks {
	/* display: none; */
	/* padding: 3rem; */
}

.topnav a {
	color: var(--text-light);
	padding: 1rem 1.5rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .25rem;
	text-decoration: none;
	font-size: 1.25rem;
	font-family: 'VT323', monospace;
	border-bottom: 1px solid var(--text-light);
	display: block;
}

.topnav a.icon {
	background: black;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}

.topnav a:hover,
.topnav a:active {
	background-color: #0c052a;
	/* color: black; */
}

.section-bio {

	padding-bottom: 1rem;

	.socials {
		position: absolute;
		right: 5vw;
		top: 8rem;
		z-index: 99;
	}
}

/* ============== */
/* SKILLS SECTION */
/* ============== */

.skills-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 3rem;

	list-style: none;
}

.skill-border-wrap {
	position: relative;
	background: var(--gradient3);
	padding: 5%;
	border-radius: 5px;
}

.skill {
	position: relative;
	z-index: 1;
	display: block;

	/* .skill-content {} */

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;

	height: 100%;
	padding: 1rem .5rem;
	border-radius: 5px;
	box-shadow: 4px 5px 10px rgba(255, 255, 255, .7);
	/* box-shadow: 1px 2px 10px var(--color-second); */
	/* box-shadow: 0 3px 10px var(--color-second); */

	text-align: center;
	font-size: 1.25rem;
	/* background: rgb(16, 9, 49); */
	transition: all .3s;

	/* &::before {
		content: "";
		position: absolute;
		z-index: 1;
		height: 100%;
		width: 100%;
		display: block;
	} */

	/* &::after {
		content: "";
		position: absolute;
		z-index: -2;
		height: 105%;
		width: 105%;
		display: block;
		background: var(--gradient3);
	} */

	img {
		height: 100%;
		max-height: 3rem;
		max-width: 90%;
		transition: all .3s;

		&.more-contrast {
			filter: contrast(1.5);
		}
	}

	span {
		color: var(--color-main);
		/* padding: .5rem 1rem; */
		width: 100%;
		transition: .5s all;
		border-radius: 5px;
		/* backface-visibility: hidden; */
	}

	&:hover {
		transform: scale(1.1);
	}

	&:hover img {
		filter: contrast(1.7);

		&.less-contrast {
			filter: contrast(1.3);
		}

		&.more-contrast {
			filter: contrast(2);
		}
	}

	&:hover span,
	&:hover img {
		transform: skew(-5deg) scale(1.1);
		font-weight: 400;
	}
}

/* ================ */
/* PROJECTS SECTION */
/* ================ */


.projects-list {
	gap: 5rem 4rem;
	flex-wrap: wrap;
	align-items: stretch !important;
	justify-content: flex-start;
}

.project-card {
	width: 45%;
	/* display: flex; */
	/* flex-direction: column; */
	padding: 5px;
	border-radius: 5px;
	gap: 5px;

	background-image: var(--gradient3);



	.project-card-main {
		display: flex;
		/* justify-content: stretch; */
		flex-direction: column;
		height: auto;
		overflow: hidden;
		margin: auto;
		gap: 5px;
		/* justify-content: space-between; */

		.project-img {
			/* width: 100%; */
			height: 100%;
			border-radius: 5px;
			overflow: hidden;
			/* width: 30rem; */
			position: relative;
			border: 3px solid var(--color-main);

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: center top;
				transition: all .3s;

				/* border-radius: 5px; */
				&:hover {
					transform: scale(1.1);
				}
			}



			.project-btns {
				position: absolute;
				bottom: 4px;
				left: 4px;


				.project-btn {
					/* padding: .5rem; */
					/* display: inline-block; */
					background-image: var(--gradient);
					border: 2px solid var(--color-main);
					/* border: none; */
					outline: none;
					cursor: pointer;
					border-radius: 5px;
					width: 2rem;
					height: 2rem;
					/* display: flex;
					align-items: center;
					justify-content: center; */
					text-decoration: none;


					i {
						color: var(--text-light);
						color: var(--color-main);
						font-size: 1rem;

						transition: all .3s;

						&:hover {
							transform: scale(1.5);
						}
					}
				}
			}
		}

		.project-card-techs {
			/* justify-self: flex-end; */
			/* height: auto; */
			/* width: 100%; */
			background: rgba(16, 9, 49, 0.4);
			background: rgba(255, 255, 255, .4);
			/* border-bottom-left-radius: 5px; */
			/* border-bottom-right-radius: 5px; */
			/* border-radius: 5px; */
			padding: .5rem .25rem;
			margin: .5rem;
			border-radius: 5px;
			/* background-image: var(--gradient); */

			ul.techs-list {
				display: flex;
				/* flex-direction: column; */
				flex-wrap: wrap;
				/* align-items: 0 0; */
				/* justify-content: space-evenly; */
				gap: .75rem .5rem;
				align-items: center;
				justify-content: center;
				padding: .25rem;
				list-style-type: none;

				li.tech {
					background-image: var(--gradient);
					/* border: 2px solid var(--color-main); */
					box-shadow: .1rem .1rem .2rem #100931;
					padding: .25rem .5rem;
					border-radius: 15px;
					color: var(--color-main);
					/* color: white; */
					font-size: .75rem;
					transition: all .1s;
					cursor: default;

					&:hover {
						transform: scale(1.1);
					}
				}
			}
		}
	}

	&:first-child,
	&:last-child {
		background-image: var(--gradient);

		/* .project-card-techs {
			background: rgba(16, 9, 49, 0.2);
		} */

		/* li.tech {
			background-image: var(--gradient3) !important;
		} */
	}

	.project-info {
		/* flex-grow: 1; */
		/* width: 20rem; */
		padding: .5rem;
		padding-left: 1rem;

		h2.project-name {
			color: var(--color-main);
			font-size: 1rem;
			font-weight: 400;
			letter-spacing: .2rem;
			text-align: center;
			padding-bottom: .5rem;
			margin-bottom: .25rem;
			border-bottom: 2px solid var(--color-main);
		}

		p.project-description {
			color: var(--color-main);
			line-height: 1.5;
			font-size: 1rem;
			font-weight: 100;
		}
	}
}


/* ==================== */
/* CERTIFICATES SECTION */
/* ==================== */

.courses-box {
	padding-bottom: 3rem;
	position: relative;

	>h2 {
		position: absolute;
		top: -4rem;
		right: -7rem;
		display: inline-block;
		margin-bottom: 2rem;
		font-size: 1rem;

		padding: .75rem 1rem;
		border-radius: 1rem;
		border: 1px dashed whitesmoke;
		background-color: rgba(16, 9, 49, .8);

		text-align: right;
		font-weight: 100;
		text-transform: uppercase;
		letter-spacing: 2px;

		transform: rotate(20deg);
		animation: pulseRotate 4s infinite linear;
	}

	&:not(:last-child) {
		margin-bottom: 10rem;
	}
}


.courses-list {
	display: flex;
	flex-wrap: wrap;
	/* align-items: center; */
	justify-content: center;
	gap: 2rem;
}

.course {
	overflow-y: hidden;

	position: relative;
	display: flex;
	flex-direction: column;
	/* align-items: space-betwee; */
	justify-content: space-between;
	gap: 1rem;

	width: 30%;
	padding: 1rem 1.5rem 3rem;
	border-radius: 5px;
	background-color: var(--color2);

	&:nth-child(4n + 2) {
		background-color: var(--color3);
	}

	&:nth-child(4n + 3) {
		background-color: var(--color0);
	}

	&:nth-child(4n + 4) {
		background-color: var(--color4);
	}

	/* TODO course */
	.course-title {
		margin-bottom: .5rem;

		a {
			color: var(--color-main);
			font-size: 1.5rem;
			font-weight: 100;
			text-decoration: none;

			cursor: pointer;
		}
	}

	.source,
	.source-teacher {
		font-size: 1rem;
		font-weight: 400;
	}

	.course-bottom {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.course-time {
		/* position: absolute; */
		/* bottom: 1rem; */
		/* right: 0; */
		display: inline-block;

		/* width: 100%; */

		font-size: 1.5rem;
		text-align: right;
	}

	button {
		cursor: pointer;
		position: absolute;
		top: unset;
		bottom: 0;
		left: 0;
		z-index: 1;

		width: 100%;
		padding: .5rem;
		background-image: var(--gradient3);
		border: none;
		border-top: 4px solid var(--color-main);
		border-radius: 0;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;

		font-family: 'Fredoka', sans-serif;
		color: var(--color-main);

		/* &.hide {
			bottom: unset;
			top: 0;
			border-radius: 0;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			border: none;
			border-bottom: 4px solid var(--color-main);
		} */
	}

	.course-description {
		overflow-y: auto;

		display: block;
		position: absolute;
		top: 0;
		bottom: 2rem;
		left: 0;
		right: 0;
		width: 100%;

		background-color: var(--color-main);
		padding: 1rem 2rem;
		line-height: 1.5;

		opacity: 1;
		transform: translateY(-1%);

		transition: all .4s ease-in-out;

		&.hidden {
			opacity: 0;
			transform: translateY(100%);
		}

		ul {
			list-style-type: disc;

			ul {
				list-style-position: inside;
				list-style-type: circle;
			}
		}
	}

	.course-progress {
		/* display: inline-block; */
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;

		height: 3rem;
		width: 3rem;
		background-color: white;
		border: 3px solid var(--color-main);
		border-radius: 50%;

		color: #100931;
		font-weight: 500;
	}
}

.courses-list--completed .course-progress {
	background-color: #100931;
	cursor: pointer;
	color: white;
}

.flex-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hi {
	margin-bottom: 1rem;

	font-family: 'VT323', monospace;
	font-size: 7rem;
	color: transparent;
	text-stroke: 2px var(--text-light);
	-webkit-text-stroke: 2px var(--text-light);
}

.light-text {
	position: relative;
	z-index: 3;

	width: 100%;
	padding-right: 2rem;

	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;

	p:not(:last-child) {
		margin-bottom: 1rem;
	}
}

/* ========== */
/* SCROLLBARS */
/* ========== */

html {
	scrollbar-color: var(--color3) #070725;
}

/* SCROLLBARS FOR Chrome,Edge,Safari,Opera */
/* html::-webkit-scrollbar,
.course-description::-webkit-scrollbar {
	scrollbar-color: unset;
	width: 1em;
}

html::-webkit-scrollbar-track,
.course-description::-webkit-scrollbar-track {

	background-color: var(--color-main);
}

html::-webkit-scrollbar-thumb,
.course-description::-webkit-scrollbar-thumb {
	background-color: var(--color-main);
	-webkit-box-shadow: inset 0 0 20px var(--color-second);
	border-radius: 10px;
} */

@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: rotate(35deg) scale(0);
	}

	60% {
		transform: rotate(-5deg) scale(1.1);
	}

	80% {
		transform: rotate(5deg) scale(1.1);
	}

	100% {
		opacity: 1;
		transform: rotate(-5deg) scale(1);
	}
}

@keyframes shake {
	0% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(-5deg);
	}
}

@keyframes pulseRotate {
	0% {
		transform: rotate(20deg) scale(1);
	}

	50% {
		transform: rotate(15deg) scale(1.2);
	}

	100% {
		transform: rotate(20deg) scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: translateX(-50%) scale(1);
	}

	50% {
		transform: translateX(-50%) scale(1.2);
	}

	100% {
		transform: translateX(-50%) scale(1);
	}
}

/* FOOTER */
footer {
	z-index: 0;
	position: relative;
	width: 100%;
	/* height: 10rem; */
	padding: 2rem;
	padding-left: 8rem;
	background-color: #100931;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#footer-img {
	height: 10rem;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}


.socials {
	display: flex;
	gap: 1rem;
	/* line-height: 1rem; */
	padding: 1rem;
	padding-top: 2rem;
}

.social {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;

	i {
		font-size: 2rem;
		color: var(--text-light);
		transition: all .2s;
	}

	&:hover i {
		color: var(--color3);
	}
}


.popup {
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #100931c8;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;

	iframe {
		height: 90%;
		width: 90%;
	}

	display: none;
}



@media screen and (max-width: 1250px) {
	.wrapper {
		width: 85vw;
	}

	.hi {
		font-size: 6rem;
	}

	/* section {
		padding-top: 1rem;
	} */

	section h1 {
		font-size: 2.5rem;
		margin-top: 1.5rem;
	}

	.social i {
		/* font-size: 1.75rem; */
	}

	.light-text {
		/* width: 100%; */
		/* padding-right: 4rem; */

		font-size: 1.1rem;
		/* font-weight: 300; */
		line-height: 1.5;
	}

	#div-photo {
		/* width: 50%; */
	}

	/* SKILLS */
	.skills-list {
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
		gap: 2rem;
	}

	.skill {
		font-size: 1rem;
		gap: .5rem;
		padding: .5rem .05rem;

		img {
			filter: contrast(1.7);
		}

		img.less-contrast {
			filter: contrast(1.3);
		}

		img.more-contrast {
			filter: contrast(2);
		}
	}

	/* COURSES */
	.courses-box {
		padding-bottom: 0rem;

		>h2 {
			position: relative;
			top: 0;
			left: 50%;
			/* left: 50%; */
			/* transform: translateX(-50%); */

			/* top: -4rem; */
			/* right: 0rem; */
			font-size: 1.1rem;
			animation: pulse 4s infinite linear;
		}

		&:not(:last-child) {
			margin-bottom: 3rem;
		}



		.courses-list {
			/* display: flex;
							flex-wrap: wrap;
							/* align-items: center; */
			/* justify-content: center; */
			gap: 1.5rem 2rem;
		}

		.course {
			/* justify-content: space-between; */
			gap: 1rem;

			/* width: 15rem; */
			padding: 1rem 1.5rem 3rem;


			.course-title {
				margin-bottom: 1rem;

				a {
					/* color: var(--color-main); */
					font-size: 1.2rem;
					line-height: 1;
					font-weight: 400;
					/* text-decoration: none; */
				}

				.source,
				.source-teacher {
					font-size: .8rem;
					/* font-weight: 400; */
				}

				.course-time {
					font-size: 1.1rem;
				}

				button {
					border-top: 3px solid var(--color-main);
				}

				.course-description {
					line-height: 1.25;
					font-size: .8rem;
				}

				.course-progress {
					font-size: .8rem;
					height: 2.25rem;
					width: 2.25rem;
				}
			}
		}
	}
}

/* TODO MEDIA QUERIES*/
@media screen and (max-width: 1080px) {
	.wrapper {
		width: 90vw;
	}

	.socials {
		padding-top: 1rem;
	}

	.courses-list .course {
		width: 45%;
	}

	.project-card {
		width: 85%;

		&:nth-child(even) {
			background-image: var(--gradient3);
		}

		&:nth-child(odd) {
			background-image: var(--gradient);
		}
	}
}

@media screen and (max-width: 850px) {
	nav {
		font-size: 1.1rem;
		padding: .75rem 1.5rem;
	}

	nav ul {
		display: none;
	}

	nav .mobile-menu-btn {
		display: block;
	}

	.wrapper {
		width: 95vw;
	}

	.flex-wrapper.rel {
		flex-direction: column;
	}

	#div-photo {
		/* height: 20%; */
		order: -1;
		padding: 0;
		/* margin-bottom: 1rem; */
	}

	.hi {
		/* position: absolute; */
		/* top: -60vw; */
		font-size: 3rem;
	}

	.section-bio .socials {
		/* padding: 0rem; */
		/* margin-top: -1.5rem; */
		flex-direction: column;
		top: auto;
		/* margin-right: 12.5%; */
	}

	.socials {
		gap: 2rem;
		margin-top: 2rem;
	}

	.social i {
		/* gap: 2rem; */
		/* font-size: 1.5rem; */
	}

	.light-text {
		/* text-align: justify; */
		/* font-size: .9rem; */
		padding-right: 0;
		/* line-height: 1.5; */
	}

	.emphasize {
		padding: 0rem 0.3rem;
	}

	section {
		/* padding-top: 0; */
		padding-inline: 1rem;
	}

	section:first-child {
		padding-top: 5rem;
	}

	/* .project-card {
		width: 85%;
	} */
}

@media screen and (max-width: 600px) {
	.light-text {
		/* text-align: justify; */
		font-size: .9rem;
		/* padding-right: 0; */
		/* line-height: 1.5; */
	}

	#div-photo {
		align-self: start;
		/* margin-top: 3rem; */
		margin-left: 12.5%;
		margin-bottom: 1rem;
	}

	/* SKILLS */
	.skills-list {
		grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
		gap: 1.5rem;
	}

	.skill-border-wrap {
		padding: 0;
	}

	.skill:hover {
		transform: none;

		img {
			transform: none;
		}

		span {
			transform: none;
		}
	}

	.skill {
		font-size: .9rem;
		gap: .5rem;
		padding: .5rem .25rem;
		box-shadow: 1px 2px 10px rgba(255, 255, 255, .7);
	}

	.courses-list .course {
		padding: .5rem 1rem 3rem;
		width: 80%;
	}

	.project-card {
		width: 95%;
	}
}