* {
	/* border: 1px solid white; */
	/* animation: none !important; */
	position: relative;
	/* letter-spacing: 0.5px; */
}

:root {
	--bg-watercolor: url('/assets/images/blue-and-green-watercolor-background.jpg');
	--bg-minneapolis: url('/assets/images/minneapolis-tom-conway.jpeg');
	/* --bg-minneapolis: url('/assets/images/minneapolis-nicole-geri.jpeg'); */
	--bg-code: url('/assets/images/code-mitchell-luo.jpeg');
	--bg-lego: url('/assets/images/lego-iker-urteaga.jpeg');
	--bg-cmgit: url('/assets/images/cmg_it_still.png');

	--color-primary: var(--color-1);
	--color-teal: #009FB3;
	--color-teal-dark: #075a66;
	/* --color-blue: #1d85e5;
	--color-blue-light: #67aae9; */
	--color-blue-dark: #10244f;
	/* --color-red: #e82c5c; */
	--color-red: #d32753;
	--color-red-dark: #a11f40;
	--color-orange: #e7a94c;
	--color-purple: #5032ac;
	--color-purple-light: #947ce1;
	--color-purple-xlight: #a998e2;
	--color-purple-dark: #100f4d;
	--color-dark-gray: #35303a;
	--color-light-gray: #c4c6d8;
	--color-light-gray-transparent: #c4c6d855;
	--color-md-gray: #989baa;
	--color-md-gray-filter: invert(76%) sepia(6%) saturate(606%) hue-rotate(193deg) brightness(82%) contrast(83%);
	--color-md-dark-gray: #544d5b;
	--color-md-dark-gray-filter: invert(29%) sepia(9%) saturate(716%) hue-rotate(227deg) brightness(96%) contrast(86%);
	--color-white-transparent: #FFFFFF55;
	--color-black: #000;
	--color-black-transparent: #00000055;
	--main-font: 'Lexend Deca', sans-serif;
	--body-font: 'Nunito Sans', sans-serif;
	/* --main-font: 'Manrope', sans-serif;
	--body-font: 'Manrope', sans-serif; */
	--length-xs: 0.8rem;
	--length-sm: 1.6rem;
	--length-md: 2.4rem;
	--length-lg: 3.2rem;

	--color-bg-1: #202124;
	--color-bg-1-clear: #20212455;
	--color-bg-2: #3b3d43;
	--color-bg-2-clear: #3b3d4355;
	--color-text-1: #E6E9F3;
	--color-text-2: #ACAFB8;
	--color-1: #5488FB;
	--color-1-filter: invert(56%) sepia(87%) saturate(3949%) hue-rotate(206deg) brightness(104%) contrast(97%);
	--color-1-light: #8aaefd;
	--color-1-dark: #29437d;
	--color-1-xdark: #2c3853;
	--color-2: #BE64F9;
	--color-2-dark: #452b57;
	--color-3: #3EECAA;
	--color-3-dark: #075a66;
	--color-orange: #e34c26;
	--color-orange-light: #f6bbac;
	--color-yellow: #f1e17a;
	--color-gray-light: #a4a5a0;
	--color-charcoal: #212123;
	--color-blue-royal: #264de4;
	--color-blue-light: #a8b7f0;

	--soft-shadow: 0 2px 16px -8px var(--color-bg-2);

	/* New color palette options */
	--color-gray-dark: #272325;
	--color-blue: #4a6df3;
	--color-blue-pale: #a3c3fb;
	--color-green: #00d7c2;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--main-font);
	box-sizing: border-box;
	overflow-x: hidden;
}

h1 {
	font-size: 6rem;
	line-height: 1.2;
	letter-spacing: -0.1rem;
	color: var(--color-black);
	font-weight: 300;
	margin: -1rem 0 2rem 0;
}

h2 {
	color: var(--color-gray-dark);
	font-weight: 400;
	line-height: 1.4;
	font-size: 4rem;
}

h3 {
	color: var(--color-md-gray);
	font-weight: 400;
	margin: 0.2rem 0;
}

.hide {
	display: none !important;
}

a:hover:not(.button) {
	opacity: 1;
}

.text-pop {
	font-weight: 700;
}

header {
	display: block;
	position: fixed;
	width: 100%;
	top: 2rem;
	z-index: 10;
}

.home-page header {
	animation: fade-down 4s ease-in-out;
}

header .container {
	border-radius: 100px;
	height: 7rem;
	padding: 1rem;
	transition: all 0.5s ease-in-out;
}

header .container.scrolling {
	background: var(--color-white-transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: all 0.5s ease-in-out;
}

.main-logo-link {
	display: block;
	position: relative;
	top: 50%;
}

.main-logo {
	display: block;
	position: relative;
	height: 5rem;
	/* top: 50%; */
	margin-top: -2.5rem;
	margin-left: 2rem;
}

nav,
.nav-link {
	font-family: var(--main-font);
	font-weight: 400;
	color: var(--color-black);
}

nav {
	display: flex;
	position: relative;
	justify-content: flex-end;
	margin-right: 2rem;
}

.nav-link {
	font-size: 1.6rem;
	margin: 0.5rem 0.25rem;
	padding: 0.5rem 1rem;
	border-radius: 3rem;
	border: 2px solid transparent;
	transition: all .1s;
}

.nav-link::after,
.email-link::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 0%;
	bottom: 0;
	left: 50%;
	opacity: 0;
	transition: all .2s;
}

.nav-link:hover::after,
.email-link:hover::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;
	opacity: 1;
	transition: all .2s;
}

.nav-link:hover::after {
	background: black;
}

.home-section {
	display: block;
	min-height: 100vh;
	background: var(--bg-watercolor);
	background-size: cover;
	background-position: center;
	padding-top: 20%;
	z-index: 3;
}

.home-section .container {
	position: relative;
	height: 100%;
}

.hero-content {
	position: relative;
	margin-top: 8rem;
}

.hero-image {
	display: block;
	position: relative;
	width: 30rem;
	max-width: 80%;
	margin-right: 2rem;
	float: right;
	transform-origin: center;
	animation: hero-animation 3s ease-in-out;
	z-index: 1;
}

.hero-text {
	z-index: 0;
	animation: fade-in 3s ease-in-out;
}

.hero-text h2 {
	font-weight: 400;
}

p {
	font-family: var(--body-font);
}

code {
	background: var(--color-dark-gray);
	color: var(--color-blue-light);
}

p.hero-text {
	font-size: 3rem;
	line-height: 1.4;
	max-width: 100%;
	width: 40rem;
	margin: 0 auto;
	font-family: var(--main-font);
	color: var(--color-gray-dark);
}

.button-container {
	display: flex;
	justify-content: center;
	margin: 5rem 0;
	animation: fade-in 4s ease-in-out;
}

.button {
	display: inline-block;
	position: relative;
	margin: 0 1rem;
	font-size: 2rem;
	font-weight: 500;
	padding: 1.6rem 3.2rem;
	height: auto;
	border-radius: 5rem;
	border: 2px solid transparent;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: all .1s;
}

.button:hover {
	border-color: inherit;
	transition: all 0.1s;
	box-shadow: var(--soft-shadow);
	opacity: 1;
}

.cta-button {
	background: var(--color-purple);
	color: white;
	border: 2px solid white;
}

.cta-button.blue {
	background: var(--color-1)
}

.cta-button:hover {
	color: black;
	background: var(--color-white-transparent);
}

.ghost-button {
	background: var(--color-white-transparent);

	border: 2px solid black;
	color: black;
}

.ghost-button:hover {
	/* background: var(--color-black-transparent); */
	background: var(--color-1);
	color: white;
}

@keyframes hero-animation {
	0% {
		scale: 0;
		rotate: -40deg;
		opacity: 0;
		transform: translateX(40%);
	}
	30% {
		scale: 1.5;
		rotate: 0deg;
		opacity: 1;
	}
	50% {
		scale: 1.5;
		transform: translateX(40%);
	}
	100% {
		scale: 1;
		transform: translateX(0);
	}
}

@keyframes fade-in {
	0%{
		opacity: 0;
		transform: translateY(50%);
	}
	70% {
		opacity: 0;
		transform: translateY(50%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-down {
	0%{
		opacity: 0;
		transform: translateY(-50%);
	}
	70% {
		opacity: 0;
		transform: translateY(-50%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.about-section,
.projects-section,
.contact-section {
	display: grid;
	position: relative;
	z-index: 1;
	background-size: cover;
	margin-top: 0;
	align-content: center;
	padding-top: 12rem;
	padding-bottom: 12rem;
	min-height: 100vh;
}

.about-section {
	background:
		linear-gradient(black, black),
		linear-gradient(to right, black 35%, transparent),
		linear-gradient(to right, black 50%, transparent),
		var(--bg-minneapolis);
	background-blend-mode: screen, multiply, color;
	background-position: center right;
	z-index: 2;
}

.attribution {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 0.5rem 0.5rem 0;
	font-size: 1.2rem;
	color: var(--color-dark-gray);
}

.dark .attribution {
	color: var(--color-md-dark-gray);
}

.attribution a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: all 0.1s ease-in-out;
}

.attribution a:hover {
	text-decoration: underline;
	transition: all 0.1s ease-in-out;
}

.dark .attribution a {
	color: var(--color-md-gray);
}

.bio {
	display: block;
	position: relative;
	padding: 5rem 5rem;
	background: var(--color-bg-2-clear);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--length-lg);
	z-index: 2;
}

.dark h2 {
	font-style: normal;
	text-align: center;
	color: var(--color-1-light);
}

.bio-body {
	color: var(--color-light-gray);
	font-weight: 400;
	/* letter-spacing: 0.8px; */
	line-height: 1.4;
}

.skills-container,
.education-container {
	display: block;
	position: relative;
	margin: 8rem 0 0 0;
	justify-content: center;
}

.skill-card {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

.skill-title,
.edu-title {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	line-height: 1;

	/* border: 1px solid white; */
}

.skill-title {
	width: 10rem;
	text-align: right;
	margin-right: 2rem;
	color: var(--color-purple-light);
}

progress {
	display: inline-block;
	appearance: none;
	border-radius: 1rem;
}

progress[value] {
	color: var(--color-purple);
	height: 1rem;
	width: calc(100% - 13rem);
	margin: 0;
}

::-webkit-progress-bar {
	background-color: var(--color-white-transparent);
	border-radius: 1rem;
}

::-webkit-progress-value {
	background-color: var(--color-purple);
	border-radius: 1rem;
}

.edu-card {
	margin: 1.6rem 0;
}

.edu-title {
	color: var(--color-1-light);
	display: block;
}

.edu-source,
.edu-type,
.edu-date {
	display: inline;
	font-weight: 300;
	color: var(--color-md-gray);
}

.edu-type:before,
.edu-date:before {
	content: ' - ';
}

.edu-source {
	font-style: italic;
}

.projects-section {
	background:
		linear-gradient(
			to bottom,
			black,
			transparent,
			black
		),
		linear-gradient(
			to bottom,
			var(--color-teal),
			var(--color-1),
			var(--color-purple)
		),
		linear-gradient(black, black),
		var(--bg-lego);
	background-position: center;
	background-size: cover;
	background-blend-mode: screen, screen, color;
}

.projects-section h2 {
	color: var(--color-1-dark);
	text-align: center;
	margin-bottom: var(--length-lg);
}

.project {
	padding: var(--length-lg);
	justify-content: space-between;
	border-radius: var(--length-lg);
	background: var(--color-white-transparent);
	transition: all 0.1s ease-in-out;
	margin-bottom: var(--length-lg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: var(--soft-shadow);
}

.project:last-of-type {
	margin-bottom: 0;
}

.project h3 {
	color: var(--color-dark-gray);
	font-size: 2.4rem;
	line-height: 1.4;
	margin-bottom: 1rem;
}

.project .button,
.contact-section .button {
	width: 80%;
	margin: 0 10%;
}

.project-thumbnail-link {
	display: block;
	position: relative;
	height: min-content;
	border-radius: var(--length-md);
	overflow: hidden;
	transition: all 0.2s ease-in-out;
}

.project-thumbnail {
	display: block;
	aspect-ratio: 16/10;
	object-fit: cover;
	max-width: 100%;
	margin: 0;
	border-radius: var(--length-md);
	transition: all 0.2s ease-in-out;
}

.project-thumbnail.top {
	object-position: top center;
	overflow-y: scroll;
}

.project-thumbnail-link:hover {
	box-shadow: var(--soft-shadow);
}

.project-thumbnail-link:hover .project-thumbnail {
	scale: 1.1;
	transition: all 0.2s ease-in-out;
}

.project-thumbnail-link::before {
	display: grid;
	position: absolute;
	align-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
	content: 'See it in action';
	color: var(--color-light-gray);
	background: var(--color-black-transparent);
	z-index: 3;
	font-size: 2rem;
	opacity: 0;
	transition: all 0.2s ease-in-out;
}

.project-thumbnail-link:hover::before {
	content: 'See it in action';
	margin: auto;
	opacity: 1;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	transition: all 0.2s ease-in-out;
}

.project-thumbnail-link.light::before {
	background: var(--color-white-transparent);
	color: var(--color-charcoal);
}

.project-text {
	padding: 0 1rem;
}

.technology-chips {
	width: 100%;
	display: flex;
	height: min-content;
	margin-bottom: var(--length-md);
}

.chip {
	display: inline-block;
	padding: calc(var(--length-xs) / 2) var(--length-xs) ;
	border-radius: var(--length-sm);
	border: 1px solid;
	border-color: inherit;
	font-weight: 600;
	font-size: 1rem;
	background: var(--color-purple-xlight);
	color: var(--color-purple);
	border-color: var(--color-purple);
	margin: 0;
}

.chip:not(:last-of-type) {
	margin-right: 0.5rem;
}

/* .chip.html {
	background: var(--color-orange-light);
	color: var(--color-orange);
}

.chip.css {
	background: var(--color-blue-light);
	color: var(--color-blue-royal);
}

.chip.javascript {
	background: var(--color-yellow);
	color: var(--color-charcoal);
}

.chip.json {
	background: var(--color-gray-light);
	color: var(--color-charcoal);
} */

.project-description {
	font-size: var(--length-sm);
	margin: 0 0 var(--length-md);
	color: var(--color-md-dark-gray);
}

.contact-section {
	background: var(--color-black);
	z-index: 0;
}

.contact-form,
.contact-section h2 {
	z-index: 2;
	position: relative;
}

.contact-description {
	font-family: var(--main-font);
	color: var(--color-light-gray);
	font-size: 2rem;
	margin-bottom: 1rem;
}

.email-link {
	display: inline-block;
	color: var(--color-light-gray);
	font-size: 2rem;
	margin-bottom: 2rem;
	transition: all 0.2s;
}

.email-link:hover {
	color: var(--color-1);
}

.email-link:hover::after {
	background: var(--color-1);
}

.contact-form {
	margin-bottom: 2rem;
	padding: 2rem 0;
	border-radius: 2rem;
	clip-path: border-box;
}

.contact-form label {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: var(--color-1);
}

.contact-form input,
.contact-form textarea {
	display: block;
	position: relative;
	padding: 1rem 1.6rem;
	margin-bottom: 2rem;
	border-radius: 2.4rem;
	border: 2px solid var(--color-bg-2);
	background: var(--color-bg-2-clear);
	color: var(--color-light-gray);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: var(--color-md-dark-gray);
}

.contact-form input:hover,
.contact-form textarea:hover {
	cursor: text;
	border-color: var(--color-md-gray);
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--color-1-light);
	background: var(--color-bg-1);
	cursor: text;
}

.contact-form input:autofill,
.contact-form input:-webkit-autofill {
	border-color: var(--color-purple-light);
	background-color: var(--color-bg-2-clear) !important;
}

.contact-form textarea {
	resize: vertical;
	margin-bottom: 4rem;
}

.contact-confirmation-message {
	display: grid;
	position: absolute;
	opacity: 1;
	visibility: visible;
	justify-content: center;
	align-content: center;
	top: 0;
	height: 100%;
	width: 100%;
	border-radius: 2rem;
	border: 2px solid var(--color-charcoal);
	background: var(--color-bg-1);
	z-index: 10;
	transition: all 1s ease-out;
}

.contact-confirmation-message.visual-hide {
	display: grid;
	opacity: 0;
	height: 0;
	top: 50%;
	visibility: hidden;
	pointer-events: none;
	/* transform: translateY(100%); */
	transition: all 2s ease-out;
}

.contact-confirmation-message p {
	text-align: center;
	font-size: 2rem;
	line-height: 1.8;
	color: var(--color-1-light);
	transform: translateY(0);
	transition: all 1s ease-out;
}

.contact-confirmation-message.visual-hide p {
	transform: translateY(20%);
	transition: all 2s ease-out;
}

.contact-confirmation-message.visual-hide p:nth-of-type(2) {
	transition-delay: 0.2s;
}

.social-link {
	display: inline-grid;
	position: relative;
	justify-content: center;
	align-content: center;
	background: var(--color-md-gray);
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	transition: all 0.2s;
	margin: 0 0.5rem;
}

.social-link i {
	color: var(--color-charcoal);
	font-size: 2rem;
}

.social-link:hover {
	background: var(--color-1);
	transition: all 0.2s;
}

.social-link:hover i {
	color: black;
}

.hexagon-container {
	display: block;
	position: fixed;
	height: 100vh;
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;
}

.hex-wrapper {
	display: block;
	position: fixed;
	top: -20vh;
	height: 100vh;
	width: 100%;
	z-index: 0;
}

.hexagon {
	position: absolute;
	margin: 1em auto;
	width: 10em; height: 17.32em;
	border-radius: 2em/ 1em;
	opacity: .15;
	transition: all .5s;
	scale: 0.3;
	z-index: 0;
}

.hexagon:before,
.hexagon:after {
	position: absolute;
	width: inherit; height: inherit;
	border-radius: inherit;
	background: inherit;
	content: '';
}

.hexagon:before {
	rotate: 60deg;
}

.hexagon:after {
	rotate: -60deg;
}

.hexagon:hover {
	transform: scale(1.1);
	transition: all 0.5s;
	/* animation-duration: 2s !important; */
}

.hexagon:nth-of-type(4n) {
	rotate: 35deg;
	scale: 0.3;
	filter: blur(8px);
	-webkit-filter: blur(8px);
	/* filter: blur(8px); */
}

.hexagon:nth-of-type(4n+1) {
	rotate: 15deg;
	scale: .8;
	filter: blur(4px);
	-webkit-filter: blur(4px);
	/* backdrop-filter: blur(4px); */
}

.hexagon:nth-of-type(4n+2) {
	scale: 0.5;
	rotate: 45deg;
	filter: blur(2px);
}

.hexagon:nth-of-type(4n+3) {
	scale: 1;
	rotate: 15deg;
	filter: blur(10px);
	-webkit-filter: blur(10px);
}

.hex-1 {
	top: 50%;
	left: 20%;
	animation: spin 15s linear infinite;
	background: var(--color-1);
}
.hex-2 {
	top: 45%;
	left: 60%;
	animation: spinCounter 30s linear infinite;
	background: var(--color-3);
}
.hex-3 {
	top: 60%;
	left: 90%;
	animation: spin 25s linear infinite;
	background: var(--color-1);
}
.hex-4 {
	top: 20%;
	left: 60%;
	animation: spinCounter 35s linear infinite;
	background: var(--color-2);
}
.hex-5 {
	top: 75%;
	left: 20%;
	animation: spinCounter 20s linear infinite;
	background: var(--color-bg-1);
}
.hex-6 {
	top: 70%;
	left: 50%;
	animation: spin 20s linear infinite;
	background: var(--color-1);
}
.hex-7 {
	top: 90%;
	left: 40%;
	animation: spinCounter 15s linear infinite;
	background: var(--color-bg-1);
}
.hex-8 {
	top: 10%;
	left: 15%;
	animation: spin 35s linear infinite;
	background: var(--color-3);
}
.hex-9 {
	top: 15%;
	left: 45%;
	animation: spinCounter 10s linear infinite;
	background: var(--color-1);
}
.hex-10 {
	top: 90%;
	left: 40%;
	background: var(--color-2);
	animation: spin 40s linear infinite;
}
.hex-11 {
	top: 60%;
	left: -10%;
	animation: spinCounter 10s linear infinite;
	background: var(--color-3);
}
.hex-12 {
	top: 30%;
	left: 0%;
	animation: spinCounter 10s linear infinite;
	background: var(--color-2);
}

footer {
	background: var(--color-bg-1);
	padding: 2rem 4rem;
}

footer,
footer * {
	color: var(--color-md-gray);
	font-family: var(--main-font);
	transition: all 0.2s;
}

.footer-logo {
	filter: var(--color-md-gray-filter);
	width: 12rem;
	transition: all 0s;
}

.footer-logo-link:hover .footer-logo {
	filter: var(--color-1-filter);
	transition: all 0s;
}

footer p {
	/* font-family: var(--main-font);
	color: var(--color-md-gray); */
	font-size: 1.4rem;
}

footer .email-link,
footer .nav-link {
	display: flex;
	position: relative;
	font-size: 1.4rem;
	color: var(--color-md-gray);
	border: 0;
	padding: 0;
	margin: 0;
	width: min-content;
}

footer .email-link i {
	position: relative;
	font-size: 1.2rem;
	top: 0.4rem;
	margin-left: 0.5rem;
}

footer .nav-link:hover,
footer .email-link:hover,
footer .email-link:hover span,
footer .email-link:hover i {
	color: var(--color-1);
}

footer .nav-link:hover::after,
footer .email-link:hover::after {
	background: var(--color-1);
}

footer .social-link {
	display: inline-grid;
	position: relative;
	justify-content: center;
	align-content: center;
	background: var(--color-md-gray);
	height: 3.2rem;
	width: 3.2rem;
	margin: 0 0.25rem;
	border-radius: 50%;
	transition: all 0.2s;
}

footer .social-link i {
	color: var(--color-charcoal);
	font-size: 1.8rem;
}

footer .social-link:hover {
	background: var(--color-1);
	transition: all 0.2s;
}

@keyframes spin {
	0% {
		rotate: 0;
	}

	100% {
		rotate: 360deg;
	}
}

@keyframes spinCounter {
	0% {
		rotate: 0;
	}

	100% {
		rotate: -360deg;
	}
}

/* SMALL SCREEN STYLES */

@media screen and (max-width: 900px) {
	section {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	header {
		top: 0;
	}

	header .container {
		position: relative;
		margin-top: 0;
		width: 100%;
		border-radius: 0;
		border: none;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: var(--color-white-transparent);
		z-index: 2;
	}

	header .container.scrolling {
		border: none;
	}

	h1 {
		font-size: 4rem;
		margin-top: 1rem;
	}

	h2 {
		font-size: 2.5rem;
		line-height: 3rem;
	}

	p.hero-text {
		font-size: 3rem;
		line-height: 1.2;
	}

	.main-logo {
		justify-self: center;
		margin: 0;
		top: -2.5rem;
		object-fit: cover;
		object-position: center left;
		width: 13.8rem;
		transition: all 0.5s;
	}

	.main-logo.scrolling {
		width: 4.5rem;
		transition: all 0.5s;
	}

	.mobile-menu-checkbox {
		display: none;
	}

	.mobile-menu-icon {
		display: block;
		position: relative;
		font-size: 3rem;
		padding: 0 2rem;
		color: black;
	}

	.mobile-menu-icon-container {
		display: flex;
		position: absolute;
		width: fit-content;
		justify-self: flex-end;
		right: 0;
		top: 0.2rem;
	}

	.mobile-nav {
		display: block;
		position: absolute;
		width: 100%;
		top: -35rem;
		left: 0;
		padding: 7rem 2rem 2rem 2rem;
		margin: 0;
		background: var(--color-white-transparent);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transition: all 0.5s;
		z-index: 1;
	}

	.mobile-nav.open {
		top: 0;
		transition: all 0.5s;
	}

	.mobile-nav a {
		display: block;
		text-align: center;
		font-size: 2rem;
	}

	.hero-image {
		display: block;
		position: relative;
		width: 16rem;
		max-width: 80%;
		margin: auto;
		float: none;
		justify-self: center;
		transform-origin: center;
		animation: hero-animation-mobile 3s ease-in-out;
		z-index: 1;
	}

	.button-container {
		margin: 2rem 0;
	}

	.button {
		font-size: 1.6rem;
		padding: 1.2rem 2.4rem;
		margin: 0 0.5rem;
	}

	.about-section {
		min-height: 100vh;
	}

	.bio,
	.projects-container {
		padding: 2rem 3rem;
	}

	.skills-container,
	.education-container {
		margin-top: 6rem;
	}

	.skill-title {
		margin-right: 1rem;
	}

	progress[value] {
		margin: 0;
	}

	.project {
		padding: 2rem 1rem;
	}

	.project h3 {
		font-size: 2rem;
	}

	.project-home h2 {
		margin: 2rem auto !important;
	}

	.project-home .project-thumbnail-link {
		max-width: 90%;
		margin-bottom: 2rem !important;
	}

	.project-home .version-number {
		font-size: 4rem;
	}

	.project-home .version-number,
	.project-home .challenge-number {
		text-align: left;
	}

}

@keyframes hero-animation-mobile {
	0% {
		scale: 0;
		rotate: -40deg;
		opacity: 0;
	}
	30% {
		scale: 1.5;
		rotate: 0deg;
		opacity: 1;
	}
	50% {
		scale: 1.5;
	}
	100% {
		scale: 1;
	}
}

/* Projects page */

.project-home {
	display: grid;
	align-content: center;
	background: linear-gradient(
		45deg,
		var(--color-black),
		var(--color-dark-gray)
	);
	/* backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px); */
}

.project-home .container {
	width: 100%;
	margin: 12rem auto 4rem;
}

.project-home .project {
	background: var(--color-black-transparent);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.project-home h2 {
	color: var(--color-purple-light);
	margin-bottom: 1rem;
	text-align: center;
}

.project-home .technology-chips {
	margin-bottom: 4rem;
	justify-content: center;
}

.project-home h3 {
	font-size: 3rem;
	margin: 0 auto 4rem;
	text-align: center;
	color: var(--color-1-light);
}

.project-home p {
	color: var(--color-gray-light);
}

.project-home p b {
	color: var(--color-purple-xlight);
}

.project-home .project-thumbnail-link {
	margin: 0 auto 4rem;
	width: 100%;
	border: 2px solid black;
}

.project-home .project-thumbnail-link:hover {
	border-color: var(--color-purple-light);
}

.project-home .project-link {
	margin-bottom: 4rem;
}

.version-number,
.challenge-number {
	display: inline-block;
	font-size: 6rem;
	line-height: 1;
	width: calc(100% - 2rem);
	text-align: right;
	margin-right: 2rem;
	color: var(--color-purple-light);
}

.challenge-number {
	font-size: 3rem;
}

.project-text .challenge-number {
	text-align: left;
	margin-bottom: 2rem;
}

.project-home .version:not(:last-of-type)::after {
	content: '';
	width: 80%;
	margin: 1rem 10% 3rem;
	height: 1px;
	background: var(--color-md-dark-gray);
}

.project-home figcaption {
	margin: 0.5rem 0 2rem 0;
	color: var(--color-light-gray);
	text-align: center;
	font-style: italic;
	font-weight: 300;
}