@charset "UTF_8";
/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=-=-=-= THESE STYLES DESIGNED AND BUILT WITH TENDER, -=-=-=-=-=-
-=-=-=-=-=-= LOVING CARE ENTIRELY BY HAND AND JUST FOR YOU =-=-=-=-=-=
=-=-=-=- IN BUCOLIC HOPEWELL, NEW JERSEY BY BESLER & DAUGHTER =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=- CSS RESET -=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: sans-serif;
}

a:link {color: #00f;}
a:visited {color: #f0f;}
a:hover {color: #0ff;}
a:active {color: #0f0;}

a:link mark {background-color:#fff;color: #00f;}
a:visited mark {background-color:#fff;color: #f0f;}
a:hover mark {background-color:#fff;color: #0ff;}
a:active mark {background-color:#fff;color: #0f0;}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- EMOJI CITY -=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

div#emoji-city {
	display: grid;
	grid-template-columns: repeat(32, 1fr);
	gap: 0;
	grid-auto-rows: 5.555555555555556vh;
	overflow: hidden;
}

div#emoji-city figure {
	text-align: center;
	align-self: center;
	font-size: 2.5vw;
	transition: transform 0.2s;
}

	div#emoji-city figure:nth-child(odd) {
	}

	div#emoji-city figure:nth-child(even) {
	}

	/*figure:nth-child(576) {
		background-color: red;
	}*/

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

header,main,footer{
	margin: 1em;
}

header {
	position: sticky;
	top: 1.5%;
	z-index:2;
}

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

h1,h2,nav,header ul,header li,h6,footer ul,footer li  {
	float: left;
}

h1,h2,header li,h6, footer li  {
	font-size: 2em;
}

h1 {
	margin-left: 0;
}

h2 {
	margin-left: 2em;
	text-align: center;
}

nav {
	float: right;
}

ul {
	text-align: right;
	list-style-type: none;
}

li::after {
	content: "_";
	color: rgba(255, 255, 255, 0);
}

li:last-child::after {
	content: "";
}

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

footer {
	column-count: 1;
	position: sticky;
	top: 95vh;
	width: 98.5%;
	z-index:2;
}

h6 {
	text-align: left;
}

/*
-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- MAIN =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=
*/

article,#profile-photo {
	transform: translateY(4em);
}

h3 {
	font-size: 0;
}

h4 {
	line-height: 0.8;
	letter-spacing: -0.09em;
	font-size: 10vw;
	border-bottom: 0.05em solid black;
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- MAIN SECTION ABOUT =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

section#about article {
	column-count: 3;
}

p {
	font-size: 18pt;
	margin: 1em 0;
}

	p:first-of-type {
		font-size: 1.8em;
	}

	#profile-photo {
		width: 100%;
		height: 100vh;
		background-image: url('../img/profile/besler-and-daughter-profile-photo-2016-andy-scott.jpg');
		background-size: cover;
		margin: 2em 0;
	}

		#profile-photo figcaption {
			padding: 1em 0 0 1em;
		}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=- MAIN SECTION PROJECTS -=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

article {
	margin-bottom: 2em;
}

main ol {
	margin-left: 1em;
	list-style-type: none;
}

main ol li {
	font-size: 4em;
	letter-spacing: -0.06em;
}