@media only screen and (max-width: 800px) {
	header {
		justify-content: center;
	}

	nav {
		width: fit-content;
		margin: 0;
	}
	
	.namebar {
		display: none;
	}

	main section {
		flex-direction: column;
	}

	main .reversesection {
		flex-direction: column-reverse;
	}

	main section img {
		margin: 0 auto 10px;
	}

	main .sectiontext {
		align-items: center;
		transform: none;
	}

	.reversesection .sectiontext {
		transform: none;
	}

	main .sectiontext p {
		--horizontalPadding: 10px;
		
		width: fit-content;
		max-width: 90%;
		font-size: 1.5em;
	}

	main .sectiontext .bold {
		font-size: 2em;
	}

	.reversesection .sectiontext p {
		text-align: unset;
	}

	.reversesection .button {
		align-self: unset;
	}

	.sectiontext .button {
		margin-left: 0;
		margin-right: 0;
	}
	
	input[type=email] {
		display: block;
		width: 11em;
	}

	input[name=firstname], input[name=lastname] {
		width: 6em;
	}

	input[name=subject] {
		width: 8em;
	}

	textarea {
		width: calc(90vw - 9px);
	}
}

/* If the screen is small enough that the header will overflow */

@media only screen and (max-width: 581.14px) {
	header {
		justify-content: center;
		height: calc(var(--headerHeight) * 2);
	}
	
	nav {
		flex-direction: column-reverse;
		height: calc(var(--headerHeight) * 2);
	}

	.navlink {
		margin-top: 13px !important;
		margin-bottom: 13px !important;
	}

	.toggle-wrapper {
		margin: 15px 0;
		padding: 0.44px 0;
	}
}

/* If the footer will overflow */

@media only screen and (max-width: 406.66px) {
	html {
		--footerHeight: 96px;
	}
	
	footer {
		flex-direction: column;
	}

	footer p {
		margin: 10px 0 15px;
	}

	footer .socials {
		margin: 0;
		padding-bottom: 10px;
	}
}