:root{
	--nav-height: 2em;
}

body{
margin:0;
height: 100%;
line-height: 130%;
font-family: "Avenir Next", Futura, Verdana, Arial, sans-serif;
}

.hero-container{
	color: white;
	text-align: center;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	height: 32vw;
	margin: 2vh auto;
	width: 91.4%; 
}
.hero-container *{
	transition: font-size 0.4s, top 0.4s;
	position: relative;
}
.hero-title{
top: 30%;
}
.hero-subtitle{
top:60%;
}

.hero-image{
background-image: url('/img/background.jpg');
background-repeat: round;
height: 100%;
border-radius: 20px;
background-size: contain;
}

.contentBackground{
	width: 90vw;
	margin:3vh auto 0 auto;
	max-width: 900px;
}

.content li{
	margin: 10px 30px;
}


.overlay1{
height: 100%;
display:block;
width: 80%;
position: absolute;
left:10%; 
top:0;
background: rgba(20, 20, 20, 0.4);
}


.nav{
	height: var(--nav-height);
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    box-shadow: 0px 1px 6px 3px rgba(10,10,10,0.3);
}

.nav ul{
	position: relative;
    margin: 0;
	padding: 0;
    text-align: center;
    height: inherit;
	display: block;
	width: 100%;
}

.nav li{
	display: block;
	width: 5.5em;
	line-height: 1.72em;
    height: inherit;
   	font-family: "Helvetica Neue", sans-serif; 
	font-variant: small-caps;
	font-weight: bold;
	float:left;
}

.nav a{
	color: #b6b1b1;
	text-decoration: none;
	display: block;
    height: inherit;
    transition: .3s background-color;
    margin-left: 2px;

}

.nav a:hover{
	background-color: #b6b1b1;
	color: black;
	border-right: 1px solid black;
}

.nav a:hover svg{
	fill: black;
}
.nav .btn-home svg{
	height: 50%;
	padding-top: 9%;
	
}
/* .nav ul li div{	
border-left: 1px rgb(170, 170, 170) solid;
width: 100%;
height: 10%;
position: absolute;
top: 0.9em;
} */
	
.viewport{
    position: relative;
    height: 100%;
}

.cardstock{
	/*styling*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
background: url('/img/creampaper.png');
}

.title{
font-size: 20pt;
padding-top: 10px;
}

.title2{
	visibility: hidden;
}

.detail{
font-size: 10pt;
padding-top: 57px;
padding-bottom: 10px;
}


.content{
	position: relative;
	top: 15%;
	/* Make thinner than background overlay and center. */
	width: 90%;
	left: 3%;
	/* text formatting*/
	line-height: 130%;
	font-family: "Avenir Next", Futura, Verdana, sans-serif; 
	overflow-x: hidden;
	/* padding: calc(1.5* var(--nav-height)) 2% 10% 2%; */
	padding: 2%
}

.contentBackground{
	padding-top: calc(1.5*(var(--nav-height)));
}

.background{
    background-image: url('/img/dark_embroidery.png');
    background-repeat: repeat;
    width: 100%;
    height: inherit;
    position: fixed;
    top: 2em;
}

.education div{
/* 	float: left; */
	display:block;
}
.education div span{
	display:block;
}



.project{
	margin: 50px 0;
}

.project-img{
	height: 40vw;
	max-height: 310px;
	max-width: 800px;
	background-size:cover;
	background-position:center;
	border-radius: 20px;
	border: 1px rgb(206, 204, 204) solid;
	margin: auto;
	/* transition: 2s; */
}

.project-img:hover .project-img-overlay{
		color: rgba(0,0,0);
		background-color: rgba(196, 196, 196, 0.6);
		transition: background-color 0.6s, color 1s;
}
.project-img:hover .project-img-overlay > div > *{
		background-color:rgb(255,255,255);
		transition: background-color 0.6s, color 1s;
}

.project-img-overlay {
	content: ' Hello';
	display: block;
	position: relative;
	left: 0;
	top: -22px; /* fudge. try and figure out whats pushing it down */
	width: 100%;
	height: calc(100% + 2px);
	background-color: rgba(196, 196, 196, 0);
	color: rgba(0,0,0,0);
	border-radius:inherit;
}

.project-img-overlay > div{
	position:relative;
	margin: auto;
	width: 80%;
	top: 30%;
	z-index:3;
}

.project-img-overlay > div > h4{
	width: fit-content;	
}

.project-img-overlay > div > p{
	font-weight:500;
	display:inline;
}


.project > a{
	text-decoration: none;
}

/* expandable blockquote logic, for use with functions in bpips.js */
/* sample html:
<blockquote class="expandable expanded">
<div><span class="tri">▶</span><h5>title</h5></div>
<p>text</p>
</blockquote>
*/


.expandable{
	overflow: hidden;
	transition: 2s;
	padding: 10px;
	backdrop-filter:brightness(85%);
	font-weight: 600;
}

.expandable > div{
	cursor: pointer;
}

.expandable > div >  h5 {
	margin: 0;
	display: inline;
}

.expandable > div > .tri{
	margin: 0 8px;
	font-size: 10pt;
}

.collapsed{
	max-height: 20px;
}

.expanded{
	max-height: 600px;
}



 
 @media only screen and (max-width: 610px){

	:root{
		--nav-height: 2.5em;
	}
	.nav ul{
		display: block;
		width: fit-content;
		margin: 0 auto;
		font-size: 1.4em;
		list-style: none;
	}
	.nav ul li{
		width: 4.4em;
	}

	.nav .btn-home{
		width: 2em;	
	}
	.nav .btn-home svg{
		padding-top: 22%;
	}

	.hero-title{
		font-size: 11vw;
	}
	.hero-subtitle{
		font-size: 7vw;
		top: 25vw;
	}
	.contentBackground{
		width:100%;
		margin: 0 auto;
	}
	.content p{
		font-size: 1.2em;
		line-height: 1.3em;
	}
	.hero-container{
		height: 50vw;
	}
 }

 @media only screen and (max-width: 460px){
	:root{
	--nav-height: 2.5em;
	}
	.nav ul li{
		width: 25vw;
		height: 100%;
		font-size: 20px;
	}


 }

 @media only screen and (max-width: 520px){
	:root{
	--nav-height: 2.5em;
	}
	.nav ul li{
		width: 20vw;
		height: 100%;
		font-size: 20px;
	}
}


 /* Small devices (portrait tablets and large phones, 600px and up) */
 

  
 @media only screen and (min-width: 610px) {
	.contentBackground{
		width:100%;
		margin: 0 auto;
	}

	.content{
		font-size: 1.1em;
	}

	.content > section > p{
		padding: 0 30px;
	}
	.content h2{
		font-size: 2em;
	}

	.hero-container{
		height: 50vw;
	}
	.hero-title{
		font-size: 52pt;
	}
	.hero-subtitle{
		font-size: 36pt;
		top: 30vw;
	}

	.project-img{
		height:40vw;
		width: 80vw;
		/* max-width: none;
		max-height: none; */
	}
	.project-img-overlay{
	top: -24px; /* fudge for valign. Also in main class. */
	}
 }
 
 @media only screen and (min-width: 768px) {
	.hero-title{
		font-size: 65pt;
	}
	.hero-subtitle{
		font-size: 36pt;
		top: 60%;
	}
	.contentBackground{
		width:100%;
		margin: 0 auto;
	}

	.hero-container{
		max-width:800px;
		max-height: 400px;
	}
 }
 
 
 @media only screen and (min-width: 992px) {
	.hero-title{
		font-size: 74pt;
	}
	.hero-subtitle{
		font-size: 46pt;
	}

	.contentBackground{
		max-width: 900px;
	}
 }
 
 
 @media only screen and (min-width: 1200px) {
	.hero-title{
		font-size: 80pt;
	}
	.hero-subtitle{
		font-size: 38pt;
	}
 } 

 @media only screen and (min-width: 1400px) {
	.hero-title{
		font-size: 80pt;
	}
	.hero-subtitle{
		font-size: 38pt;
	}
 } 
 @media only screen and (min-width: 1600px) {
	.hero-title{
		font-size: 80pt;
	}
	.hero-subtitle{
		font-size: 38pt;
	}
 }