/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.3
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}




* {
	font-family: "Alverata", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 16px;
	line-height: 1.4rem;
	color: #291e1e;
}

html, body {
/* 	outline: 1px solid blue; */
background-color: #fbf1e1;
}

h1 {
	font-size: 2rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.2rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}

h2 + p, h3 + p {
	margin-top: -.5rem;
	margin-bottom: 1.6rem;
}

p {
	margin-bottom: 1rem;
}

a {
	color: #7d3324;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

em {
	font-style: italic;
}

blockquote {
	font-style: italic;
	border-left: 2px solid #7d3324;
	padding-left: 1rem;
	margin-left: -1rem;
}

ul {
	margin-bottom: 1rem;
}

li {
	margin-bottom: .5rem;
	list-style-type: tamil;
}




header, nav, main {
	width: 100%;
	max-width: 80ch; 
	margin: 2rem auto;
	padding: 0 1rem;
	
/* 	outline: 1px solid turquoise; */
}



.banner {
	overflow: hidden;
}

.banner img {
	width: 100%;
	height: 33vh;
	object-fit: cover;
	
/* 	filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-40deg); */
/* 	filter: sepia(80%) saturate(200%) hue-rotate(-10deg); */
/* 	filter: invert(12%) sepia(70%) saturate(477%) hue-rotate(-17.04deg) brightness(95%) contrast(108%); */
/*filter: sepia(230%) saturate(210%);*/
	filter: sepia(20%);
}

.home .banner img {
	height: 50vh;
}

header {
	margin-top: -3.5rem;
	height: 2rem;
	/*! z-index: 100; */
	position: relative;
}

header h1, header h2 {
/*	color: #ffffe3;*/
	color: #fbf1e1;
}

header a {
	text-decoration: none;
}

header:hover h2 {
	color: #7d3324 !important;
}




nav  {
  
}

nav ul {
	display: flex;
	gap: 1rem;
}

nav li {
	margin-bottom: 0rem;
	list-style-type: none;
}

nav a {
	text-decoration: none;
}

nav li.here a {
	border-bottom: 1px solid #7d3324;
}

main {
/* 	outline: 1px solid darkmagenta; */
}


section {
	margin-top: 6rem;
}








.intro {
	position: relative;
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.intro h1, .intro h2 {
	margin: 0;
}

.intro img {
	width: 14rem;
}

.home .intro img {
	width: 7rem;
	position: relative;
	bottom: -2.3rem;
	left: -3.8rem;
	opacity: .9;
}






.list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.item {
  text-decoration: none;
  width: 100%;

  display: flex;
  flex-direction: row;
  gap: .5rem;
	align-items: start;
	
	padding: .5rem;
	border-radius: .5rem;
}

.item:hover {
	background-color: #ffddc1;
}

.item img {
	width: 7rem;
	border-radius: .5rem;
}

.item .text {
	display: flex;
	flex-direction: column;
	padding-left: .5rem;
}

.item h3 {
	margin: 0;
}

.photography .item {
	flex-direction: column;
}

.photography .item img {
	width: 100%;
}




section.images {
	height: 80vh;
	width: auto;
  display: flex;
  gap: 1rem;
	overflow-x: scroll;
}

section.horizontal.images {
/* 	width: auto; */
}

.about section.images {
	height: 33vh;
}

.project-intro {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: start;
	position: relative;
}

.project-intro img {
	width: 7rem;
	border-radius: .5rem;
	height: 7rem;
}


@media only screen and (max-width: 500px) {
	* {
	 font-size: 14px;
	}
	
	.list {
  	flex-direction: column;
  }
	
	.project-intro {
		flex-direction: column;
		left: 0;
	}
	
	.project-intro div {
		margin-right: 0;
	}
	
	blockquote {
		border-left-width: 6px;
	}

	.home .intro {
		position: relative;
		left: 3rem;
		margin-right: 3rem;
	}
	
	ul li {
		margin-left: 1rem;
	}
	
}