@charset "utf-8";

:root
{
	--background: #ebebeb;
	--boxBackground: #fff;

	--accent: #009988;

	--foreground: #444;
	--boldForeground: #000;
	--subtleForeground: #888;
	--quietForeground: #ccc;

}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--background: #2a2a2a;
		--boxBackground: #000;

		--accent: #00CCAA;

		--foreground: #ebebeb;
		--boldForeground: #fff;
		--subtleForeground: #888;
		--quietForeground: #666;
	}
}

*
{
	box-sizing: border-box;
}

.visually-hidden
{
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

header,footer,nav,main,section,figure,article,aside
{
	display: block;
}

a
{
	color: var(--accent);
}

html
{
	font-size: 1vw;
}

html,
body
{
	margin: 0;
	padding: 0;
}

body
{
	font-family: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times", "Source Serif Pro", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background-color: var(--background);
	color: var(--foreground);
}

h1
{
	font-size: 2em;
	text-align: center;
	margin: 0 auto 0;
}

header p
{
	font-size: 1em;
	margin-top: 0 auto 1em auto;
}

header,
footer
{
	margin: 2em auto;
	text-align: center;
}

footer
{
	background: var(--background);
	color: var(--subtleForeground);
	font-size: 1em;
	margin: 4em auto 2em auto;
}

figure.gallery-item
{
	margin: 0;
}

#gallery-container
{
	margin: 0 auto;
	max-width: 98rem;
	display: grid;
	grid-gap: 4rem;
	grid-template-columns: auto auto auto;
	justify-items: center;
	filter: drop-shadow(0 0 0.45rem rgba(0,0,0,0.5));
}

.gallery-item
{
	width: 30rem;
	height: 30rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	position: relative;
	transition: 1s ease-in background-image;
}

.gallery-item,
.full-painting img
{
	border-radius: 0.15em;
	box-shadow: 0 0 0.45rem rgba(0,0,0,0.5);
}

figure.sold,
figure.pending
{
	position: relative;
	overflow: hidden;
}

figure.sold:after,
figure.pending:after
{
	font-weight: 800;
	font-size: 0.75em;
	letter-spacing: 0.125em;
	content: "SOLD";
	position: absolute;
	top: 5%;
	right: -40%;
	transform: rotate(30deg);
	color: #fed490;
	background-color: #CF0000;
	padding: 0.25em 0.75em;
	display: block;
	width: 100%;
	text-align: center;
}

figure.sold:after
{
	content: "SOLD";
	color: #fed490;
	background-color: #CF0000;
}

figure.pending:after
{
	content: "PENDING";
	letter-spacing: 0.0625em;

	color: #CF0000;
	background-color: #fed490;
}

.gallery-item#columbia_river_sunset { background-image: url("/works/columbia_river_sunset.jpg"); }
.gallery-item#oceanside_oregon { background-image: url("/works/oceanside_oregon.jpg"); }
.gallery-item#winter_rocks_on_the_oregon_coast { background-image: url("/works/winter_rocks_on_the_oregon_coast.jpg"); }
.gallery-item#john_hix_ranch { background-image: url("/works/john_hix_ranch.jpg"); }
.gallery-item#spring_in_the_columbia_river_gorge { background-image: url("/works/spring_in_the_columbia_river_gorge.jpg"); }
.gallery-item#penny_on_la_selva_beach { background-image: url("/works/penny_on_la_selva_beach.jpg"); }
.gallery-item#netarts_bay_sunrise { background-image: url("/works/netarts_bay_sunrise.jpg"); }
.gallery-item#hood_river_crossing { background-image: url("/works/hood_river_crossing.jpg"); }
.gallery-item#palm_canyon { background-image: url("/works/palm_canyon.jpg"); }
.gallery-item#winter_sunset { background-image: url("/works/winter_sunset.jpg"); }
.gallery-item#ajijic_farmers_market { background-image: url("/works/ajijic_farmers_market.jpg"); }
.gallery-item#erins_place { background-image: url("/works/erins_place.jpg"); }
.gallery-item#up_river { background-image: url("/works/up_river.jpg"); }
.gallery-item#lost_memories { background-image: url("/works/lost_memories.jpg"); }
.gallery-item#hood_river_lavender_fields { background-image: url("/works/hood_river_lavender_fields.jpg"); }
.gallery-item#elevating_dufur { background-image: url("/works/elevating_dufur.jpg"); }
.gallery-item#spring_in_hood_river_valley { background-image: url("/works/spring_in_hood_river_valley.jpg"); }
.gallery-item#analemma_picnic { background-image: url("/works/analemma_picnic.jpg"); }
.gallery-item#analemma_vineyard { background-image: url("/works/analemma_vineyard.jpg"); }
.gallery-item#alloro_autumn_morning { background-image: url("/works/alloro_autumn_morning.jpg"); }
.gallery-item#minus_tide_at_netarts_bay { background-image: url("/works/minus_tide_at_netarts_bay.jpg"); }
.gallery-item#sellwood_bridge { background-image: url("/works/sellwood_bridge.jpg"); }
.gallery-item#duniway_school { background-image: url("/works/duniway_school.jpg"); }
.gallery-item#oaks_bottom_and_park { background-image: url("/works/oaks_bottom_and_park.jpg"); }
.gallery-item#casting_dreams { background-image: url("/works/casting_dreams.jpg"); }
.gallery-item#willamette_house_boats { background-image: url("/works/willamette_house_boats.jpg"); }
.gallery-item#roussillon_et_mont_ventoux { background-image: url("/works/roussillon_et_mont_ventoux.jpg"); }
.gallery-item#terrasse_de_bonnieux { background-image: url("/works/terrasse_de_bonnieux.jpg"); }
.gallery-item#via_roma_a_cortona { background-image: url("/works/via_roma_a_cortona.jpg"); }
.gallery-item#dunluce_castle { background-image: url("/works/dunluce_castle.jpg"); }
.gallery-item#agriturismo_casa_delia { background-image: url("/works/agriturismo_casa_delia.jpg"); }
.gallery-item#casa_delia_cacti { background-image: url("/works/casa_delia_cacti.jpg"); }
.gallery-item#alcazar_early_morning { background-image: url("/works/alcazar_early_morning.jpg"); }
.gallery-item#sunset_at_la_selva_beach { background-image: url("/works/sunset_at_la_selva_beach.jpg"); }
.gallery-item#andreas_trail { background-image: url("/works/andreas_trail.jpg"); }
.gallery-item#guanajuato_mexico { background-image: url("/works/guanajuato_mexico.jpg"); }
.gallery-item#yelapa_mexico { background-image: url("/works/yelapa_mexico.jpg"); }
.gallery-item#chapala_mexico { background-image: url("/works/chapala_mexico.jpg"); }
.gallery-item#chapala_promenade { background-image: url("/works/chapala_promenade.jpg"); }
.gallery-item#huatulco_sunset { background-image: url("/works/huatulco_sunset.jpg"); }
.gallery-item#oaxaca_mercado { background-image: url("/works/oaxaca_mercado.jpg"); }
.gallery-item#calle_patrocinio { background-image: url("/works/calle_patrocinio.jpg"); }
.gallery-item#plaza_del_bartillo { background-image: url("/works/plaza_del_bartillo.jpg"); }
.gallery-item#calle_potrero { background-image: url("/works/calle_potrero.jpg"); }
.gallery-item#kevin { background-image: url("/works/kevin.jpg"); }
.gallery-item#poncho_de_ajijic { background-image: url("/works/poncho_de_ajijic.jpg"); }
.gallery-item#maddie { background-image: url("/works/maddie.jpg"); }
.gallery-item#ollie { background-image: url("/works/ollie.jpg"); }
.gallery-item#june { background-image: url("/works/june.jpg"); }
.gallery-item#milo { background-image: url("/works/milo.jpg"); }
.gallery-item#eric { background-image: url("/works/eric.jpg"); }
.gallery-item#bob { background-image: url("/works/bob.jpg"); }
.gallery-item#diego { background-image: url("/works/diego.jpg"); }

.gallery-item#netarts_bay { background-image: url("/works/netarts_bay.jpg"); }
.gallery-item#self_portrait { background-image: url("/works/self_portrait.jpg"); }

.gallery-item figcaption
{
	background-color: var(--background);
	color: var(--foreground);
	opacity: 0.8;
	display: inline-block;
	position: absolute;
	bottom: 0.5em;
	width: 100%;
	text-align: center;
	opacity: 0.7;
	transition: 250ms opacity ease-in-out;
	font-size: 1em;
}

.full-painting figcaption,
div.bio
{
	margin: 3em auto;
	background-color: var(--boxBackground);
	border-radius: 0.5em;
	max-width: 100rem;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2em;
}

div.bio
{
	max-width: 80rem;
	padding: 1em;
}

div.bio img
{
	max-width: 100%;
	height: auto;
}

.full-painting figcaption p,
div.bio p
{
	text-align: left;
}

.gallery-item figcaption cite,
.full-painting figcaption cite
{
	display: block;
	font-size: 1.2em;
}

.gallery-item figure:hover figcaption
{
	opacity: 1;
}

.gallery-item img
{
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
}

.full-painting
{
	display: grid;
	place-items: center;
}

.full-painting img
{
	width: 100%;
	height: auto;
}

body
{
	font-size: 3.6rem;
}

#gallery-container
{
	grid-template-columns: 1fr;
}

.gallery-item
{
	width: 86rem;
	height: 86rem;
}

@media (min-width: 480px)
{
	body
	{
		font-size: 2.4rem;
	}

	#gallery-container
	{
		grid-template-columns: 1fr 1fr;
	}

	.gallery-item
	{
		width: 47rem;
		height: 47rem;
	}
}

@media (min-width: 960px)
{
	body
	{
		font-size: 1.8rem;
	}

	#gallery-container
	{
		grid-template-columns: 1fr 1fr 1fr;
	}

	.gallery-item
	{
		width: 30rem;
		height: 30rem;
	}
}

@media (min-width: 1200px)
{
	html
	{
		font-size: 12px;
	}
}