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

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

	div.about-me-hero-container {
		position: absolute;

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

		/* border: 1px darkgray; */
	}

	div.about-me-hero {
		width: 900px;
		height: 900px;

		max-height: calc(100vh - ((100vh - 520px) / 2));

		background-image: url("https://cdn.aaronpantling.com/about-me/floating-rocks-color-2000.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	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;
	}

	div.about-me-responsive-container {
		width: 100%;
		aspect-ratio: 1;
		position: relative;
		margin-bottom: 48px;
	}
	
	div.about-me-responsive {
		background-image: url("https://cdn.aaronpantling.com/about-me/floating-rocks-1600.png");
		height: 160%;
		position: absolute;

		background-size: 160%;
		background-repeat: no-repeat;

		width: 170%;
		max-width: calc(100vw - 32px);
	}


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

	.nav-container {
		position: relative;
	}

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