/*DEFAULT TYPOGRAPHY*/
@import url('https://fonts.googleapis.com/css?family=Raleway');

:root {
	--navbuttondim: 30px;
}

html {
	font-family:'Raleway';
	background-position: center;
	background-repeat: repeat-y;
	background-size: cover;
	background-image: url("zigzag.jpg");
	height: 100%;
	color: #333;
	color: #purple;
}
	
a {
	color:#333;
	text-decoration:none;
}

h1 {
	
}
p {
	margin-bottom:1.em
}
/*GRID*/
.grid-container-home {
	display: grid;
	justify-content: center;
	align-items: end; /* aligns each area to bottom except name */ 
	grid-template-areas:
	'navbar navbar' 
	'name nameblurb'
	'content content'		
	'email phone';
	grid-template-columns: auto 1fr;
	/*  
	grid-template-columns: 20%;
	*/
	grid-gap: 10px;
	padding: 50px 12%; /*top+bottom, left+right*/
}
.grid-container {
	display: grid;
	justify-content: center;
	align-items: end; /* aligns each area to bottom except name */ 
	grid-template-areas:
	'navbar' 
	'content';
	grid-template-columns: 1fr ;
	grid-gap: 10px;
	padding: 50px 12%; /*top+bottom, left+right*/
}
/*NAVIGATION*/
.navbar {
	grid-area: navbar; 
	display: flex;
	/*padding: 12px;*/
	justify-content: space-between;
}
.navbar > a {
	display:flex;
	width: 120px;
	height: var(--navbuttondim);
	border: 1px solid #333;
	border-radius: 40px;
	justify-content:center;
	align-items:center;/*Vertical align*/	
	
	margin-right: 5%;
	text-decoration: none;
	transition-property: color, background-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}
.navbar > a:hover,
.navbar > a:focus, 
.active {
	background-color: #ddd;
}

/* lang EN/FR */
a.lang {
	background-color: #ddd;
	flex-shrink: 0;
	width: var(--navbuttondim);
	margin-right: 0px;
}
.langhover {
	display:none;
	font-size:10pt;
	color:white;
}
a.lang:hover {
	background-color:#333;
}
a.lang:hover .langnow {
	display:none;
}
a.lang:hover .langhover {
	display:inline;
}



/*OTHER GRID AREAS*/


.name {
	grid-area: name; 
	display:flex; 	/* why is this necessary for name but not for .nameblurb ?	*/
	font-size:40pt;
	height:200px;
	align-items: end;
}
.nameblurb {
	grid-area: nameblurb; 
	/*
	not necessary : 
	display:flex;
	align-items: end;
	*/
	font-size:16pt;
	padding-bottom: 8px;
}

.email { 
	grid-area: email;
}
.phone {
	grid-area: phone;
}	
.email, .phone { 
	color: #aaa;
	height: 50px;
	display:flex;
	align-items: end;
}
.email > a {
	text-decoration: none;
	color: #aaa;
}
.email > a:hover {
	/*text-decoration: none;
	*/
	color: #000;
}




/*OTHER MEDIA*/
/*http://stephen.io/mediaqueries/*/

/*iPhone portrait*/
@media only screen 
/*and (min-device-width : 375px) */
and (max-device-width : 667px) 
and (orientation : portrait) { 
	.grid-container-home {
		display: grid;
		grid-template-areas:
			'navbar'
			'nameblurb'
			'name'
			'email'
			'phone';
		grid-template-columns: 1fr;
	    /*grid-template-rows: auto;*/
		grid-gap: 10px;
		padding: 3% 3%; /*top+bottom, left+right*/
	}
	.grid-container {
		display: grid;
		grid-template-areas:
			'navbar'
			'content'
		grid-template-columns: 1fr;
	    /*grid-template-rows: auto;*/
		grid-gap: 10px;
		padding: 3% 3%; /*top+bottom, left+right*/
	}
	.navbar {
		flex-direction: column; 
		flex-wrap: wrap;
		height: 100px;
		width:auto;
		margins:auto;
		/*display:flex;
		justify-content:space-between;
		justify-self:stretch;
		align-items: end;*/
	}
	.navbar > a.lang {
		margin-left: auto;
		}
	.nameblurb {
		height:50px;
		display:flex;
		align-items: end;
		font-size:14pt;
	}
	.name {
		/*
		height:minmax(auto, 20px);
		*/
		height:80px;		
		font-size: 30pt;
	}
	.email {
		height: 50px;
	}
	.phone {
		height: auto;
	}
	/*.email, .phone { 
	color: #aaa;
	display:flex;
	align-items: end;
	*/
}

}

/*iPhone landscape*/
@media only screen 
/*and (min-device-width : 375px)*/ 
and (max-device-width : 667px) 
and (orientation : landscape) {
	.grid-container {
		display: grid;
		grid-template-areas:
			'nameblurb'
			'name'
			'mainbit'
			'footer';
		grid-template-columns: 1fr;
		
	}
}