@media screen and (min-width: 901px) {
	
	body {
		min-height: max(100vh, 600px);
	}

	div#background {
		transform: none;
	}
	
	p#copyright {
		position: absolute;
		bottom: 0;
		width: 100vw;
	}

	img.about-me-hero {
		position: absolute;

		width: 540px;
		height: 520px;
		right: 50%;
		top: 50%;
		transform: translate(0,-50%);

		border: 1px darkgray;
	}

	div.page-about-me {
		position: absolute;

		max-width: 540px;
		left: 50%;
		top: 50%;
		transform: translate(0,-50%);
		padding-left: 48px;
		padding-right: 32px;
	}

	.page-about-me p, .page.responsive p {
		text-align: left;
		text-wrap: balance;
	}

	.page.responsive {
		display: none;
	}

}


@media screen and (max-width: 900px) {
	
	img.about-me-hero, div.page-about-me {
		display: none;
	}

	img.about-me-responsive {
		width: 100%;
		height: 300px;
		object-fit: contain;
	}

	/* Reverting these settings is easier than getting rid of the nav-container */

	.nav-container {
		position: relative;
	}

	div#background {
		transform: translate(0px, -32px);
	}
	
}