/* Smaller desktop size */

@media screen and (max-width: 1420px) {
	
	p {
		font-size: 14px;
	}

	h3 {
		font-size: 17px;
	}

	nav {
		max-width: 1092px;
	}

	.page {
		max-width: 1070px;
	}

	.thumbnail {
		height: 162px;
	}

	.title-block {
		height: 200px;
	}

	.gallery.enforce-width .thumbnail, .dummy {
		width: 260px;
	}

	.gallery-link-item h3, .gallery-link-item p {
		max-width: 240px;
	}

	.more-content-placeholder {
		width: 254px;
		height: 156px;
	}
	/* 
	div.page-about-me {
		max-width: 540px;
	} */

}

/* Desktop; break width to 3 cells */

@media screen and (max-width: 1160px) {
	.gallery.enforce-width {
		justify-content: unset;
	}
}


/* Mobile (tablet) */

@media screen and (max-width: 900px) {
	
	/* Pull the background effect in so it's still visible */
	
	div#background {
		background-size: 2400px auto;
	}
	
	/* Hide all but the active header link and show the interactive menu icon */

	nav#normal a:not(#home):not(.selected):not(#menu) {
		display: none;
	}

	nav#normal a#menu {
		display: inline;
	}

	/* Cut down page margins */

	nav {
		padding-left: 18px;
		padding-right: 23px;
	}

	.page {
		padding-left: 32px;
		padding-right: 32px;
	}

	/* Make title block text more readable now that we're losing control of the layout */

	.title-block * {
		text-shadow: black 0 0 24px, black 0 0 10px;
	}

	/* Rework the gallery layout to be more generally suitable for weird widths */

	.gallery {
		justify-content: space-around !important;
	}

	.gallery-link-item {
		/* Extra width to force it into two columns here */
		margin-left: 10px;
		margin-right: 10px;
	}

	.gallery .dummy {
		display: none;
	}

	/* Hide the navigation buttons. Instead we'll rely on touchscreen swipes. */

	a.navigation.next, a.navigation.previous {
		display: none;
	}
}

/* Mobile (phone) */

@media screen and (max-width: 500px) {
	.gallery-link-item {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.gallery.enforce-width .thumbnail  {
		width: 100%;
		height: unset;
		aspect-ratio: 1.6;
	}

	.gallery:not(.enforce-width) .thumbnail {
		width: 100%;
		height: unset;
		aspect-ratio: 1.6;
		object-fit: contain;
	}

	p {
		text-align: initial;
	}
}