@charset "UTF_8";
/*
_______________________________________________________
_______________________________________________________
___________ THESE STYLES DESIGNED AND BUILT ___________
__________ ENTIRELY BY HAND AND JUST FOR YOU __________
___________ IN BUCOLIC HOPEWELL, NEW JERSEY ___________
____________________ BY IAN BESLER ____________________
______________ https://www.ianbesler.com ______________
_______________________________________________________
_______________________________________________________
*/

/*
_______________________
_______________________
______ CSS RESET ______
_______________________
_______________________
*/

* {
	margin: 0;
	padding: 0;
}
	a:link {
		color: #00f;
	}

	a:hover {
		background-color: #ff0;
	}

html,body {
	width: 100%;
}

	body {
		font-family: sans-serif;
	}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- HTML5 SEMANTIC TAGS -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* =-=-=-=-=-=-=-=-=
=-=-=- HEADER =-=-=-
-=-=-=-=-=-=-=-=- */

header {
	background-color: lightgray;
	padding: 2%;
	border-bottom: 0.1em solid #000;
	font-size: 1.5em;
}

	h1,h2,h3,h4,h6 {
		font-weight: normal;
	}

section {
	padding: 2%;
}

figure {
	margin: 2em 0;
	width: 96%;
	height: 40vw;
	background-size: cover;
	background-attachment: fixed;
}

	#abstract-shapes-1 {
		background-image: url('../img/abstract-shapes-1.jpg');
	}

	#abstract-shapes-2 {
		background-image: url('../img/abstract-shapes-2.jpg');
	}

	#beach {
		background-image: url('../img/beach.jpg');
	}

	#bristle-grass {
		background-image: url('../img/bristle-grass.jpg');
	}

	#chroma-1 {
		background-image: url('../img/chroma-1.jpg');
	}

	#chroma-2 {
		background-image: url('../img/chroma-2.jpg');
	}
	
	figcaption {
		padding-top: 0.2em;
		font-weight: bolder;
		text-align: center;
		font-size: 10vw;
		color: #fff;
		opacity: 0.8;
	}

		figure p {
			font-size: 2em;
			text-align: center;
			margin: 0 auto;
			background-color: rgba(255,255,255,0.8);
			padding: 1em;
		}


/* =-=-=-=-=-=-=-=-=
=-=-=- FOOTER =-=-=-
-=-=-=-=-=-=-=-=- */

footer {
	background-color: lightgray;
	padding: 2%;
	font-size: 2em;
	border-top: 0.1em solid #000;
}

	footer img {
		width: 1em;
	}