/* ----------- MOBILE STYLES ----------- */
@media (max-width: 1024px) {
	/* ----------- NAVIGATION ----------- */
	nav {
		width: 95%;

		margin: 0 auto 2.5rem;
		font-size: 3.4vw;
	}

	nav ul {
		gap: 5vw;
		justify-content: center;
	}

	nav a {
		letter-spacing: -0.15vw;
	}

	nav a.active {
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 0.6vw;
	}

	/* ----------- CONTACT STYLES ----------- */
	#contact {
		width: 96%;
	}

	#contact > div {
		padding: 2vw;
	}

	#contact section {
		padding: 2vw;
	}
}

@media (max-width: 720px) {
	body {
		width: 98%; /* keeping some space between the edges */
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* ----------- HEADER SECTION ----------- */
	header h1 {
		font-size: 19vw;
		margin-bottom: -5vw;
		
	}

	header h3 {
		font-size: min(2rem, 8vw);
	}

	header {
		margin-top: 6.5vh;
	}

	/* ----------- NAVIGATION ----------- */
	nav {
		margin: 0 3vw 2.5rem;
		font-size: min(2rem, 7vw);
	}

	nav ul {
		gap: 1vw;
		display: inline-block;
		column-count: 2;
	}

	/* ----------- ARTICLE STYLES ----------- */
	h2 {
		font-size: 7vw;
	}

	/* ----------- GALLERY STYLES ----------- */
	#gallery ul li img {
		height: 15rem;
	}

	/* ----------- PROJECT STYLES ----------- */
	#projects section {
		width: 98%;
	}

	#projects ul li {
		flex-direction: column;
		height: auto;
	}

	#projects ul li div {
		width: 100%;
	}

	#projects ul li img {
		width: 100%;
		height: 14rem;
	}

	/* ----------- ANIMATIONS STYLES ----------- */
	#animations section {
		width: 98%;
	}

	/* ----------- CONTACT STYLES ----------- */
	#contact {
		width: 96%;
	}

	#contact > div {
		flex-direction: column;
		padding: 3vw;
	}

	#contact section {
		width: 100%;
		text-align: center;
		padding-bottom: 6vw;
	}

	#contact section h2 {
		font-weight: 800;
		font-size: 9vw; /* size of the contact header */
	}

	#contact section p {
		font-size: min(1.3rem, 5vw);
		line-height: 1;
	}

	#contact form {
		width: 100%;
	}
}