body {
	margin: 0;
	padding: 0;
}

header {
	height: 200px;
	text-align: center;
	clear: both;
}

footer {
	height: 50px;
	margin-top: 20px;
	clear: both;
}

.bio {
	/* float: right? */
}

.portrait img {
	width: 100%;
	border: 1px solid;
}

article img {
	width: 100%;
	box-sizing: border-box;
}

.legal {
	width; 40%;
	float: left;
}

.byline {
	width; 40%;
	float: right;
}

.video {
	border: 1px solid;
	margin: 25px 0 10px 0;
}

article {
	margin-bottom: 20px;
}


/* Mobile text *********************** */

body, p {
	font-size: 1.25rem;
}

h1 {
	font-size: 4rem;
	line-height: 3.25rem;
}

h2 {
	font-size: 3rem;
	padding-top: .25rem;
}

h2:first-child {
	margin-top: 0;
}

h3 {
	font-size: 2rem;
}


h4 {
	font-size: 1.5rem;
	margin: 0 0 10px 0;
}

.bio p,
.bio ul {
	font-size: 1rem;	
}

/* responsive media *********************** */

/* https://www.ostraining.com/blog/coding/responsive-videos/ */
.responsive-video {
    overflow:hidden;
    position:relative;
    height:0;
    padding-bottom: 56.25%; /* 16:9 = height is 56.5% of width */	
}

.aspect-4-3 {
    padding-bottom: 75%; /* 4:3 = height is 75% of width */	
}
.aspect-4-3 {
    padding-bottom: 66.67%; /* 3:2 = height is 66.67% of width */	
}
.aspect-2-1 {
    padding-bottom: 50%; /* 2:1 = height is 50% of width */	
}

.responsive-video iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}


/* Responsive *********************** */
/* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 */
/* 600px, 900px, 1200px, 1800px */

@media (max-width: 599px) { 
	
	.content {
		width: 90vw;
		margin: 0 5vw;
	}
	
	aside {
		width: 80vw;
		margin: 0 9vw;
	}
}

@media (min-width: 600px) and (max-width: 899px) { 
	
	.content {
		width: 90vw;
		margin: 0 5vw;
		clear: both;
	}
	
	aside {
		width: 80vw;
		margin: 0 9vw;
		clear: both;
	}

	.portrait {
		width: 40vw;
		float: left;
		margin-right: 5vw;
	}
	
	.bio .text {
		width: 30vw; 
		float: left;
	}
	
}

@media (min-width: 900px) and (max-width: 1199px) { 

	.layout {
		width: 90%;
		margin: auto; 
		clear: both;
	}

	.content {
		width: 75%;
		float: right; 
	}

	aside {
		width: 20%;
		height: 100%; /* experimental */
		float: left;
		position: relative;
	}
	
	.bio {
	    /* scrolling-bio */
		/* position: fixed; 
		width: inherit;
		top: 0;
		bottom: 0; */
	}
	
	h1 {
		font-size: 4rem;
		line-height: 3rem;
	}
		
	h2 {
		font-size: 2.5rem;
		padding-top: .25rem;
	}
	
	.text .inner {
		padding: 0 20px 0 20px; /* test this */
	}
}

@media (min-width: 1200px) and (max-width: 1799px) { 
	.layout {
		width: 1300px;
		margin: auto;
		clear: both;
	}	
	
	body{
		background-size: 1900px;
	}

	.layout {
		width: 1160px;
		margin: auto; 
		clear: both;
	}

	.content {
		width: 940px;
		float: right; 
	}

	aside {
		width: 200px;
		float: left;
		position: relative;
	}
	
	.bio {
	    /* scrolling-bio */
		/* position: fixed;
		width: inherit;
		top: 0;
		bottom: 0; */
	}	
	
	.text .inner {
		padding: 0 20px 0 20px;
	}
}

@media (min-width: 1800px) { 
	.layout {
		width: 1300px;
		margin: auto;
		clear: both;
	}

	body{
		background-size: 2400px;
	}

	.layout {
		width: 1300px;
		margin: auto; 
		clear: both;
	}

	.content {
		width: 960px;
		float: right; 
	}
	
	aside {
		width: 275px;
		float: left;
		position: relative;
	}
	
	.bio {
	    /* scrolling-bio */
		/* position: fixed;
		width: inherit;
		top: 0;
		bottom: 0; */
	}
	
	article .text .inner {
		padding: 1px 25px 20px 20px;
	}
	
	body, p {
		font-size: 1.5rem;
	}

	h1 {
		font-size: 5rem;
		line-height: 2rem;
	}

	h2 {
		font-size: 3rem;
		padding-top: .25rem;
	}

	h3 {
		font-size: 2rem;
	}

	h4 {
		font-size: 1.5rem;
		margin: 0 0 10px 0;
	}

	.bio p,
	.bio ul {
		font-size: 1.25rem;	
	}
	
	.responsive-video {
		/* margin: 0% 2% 1% 1%; */
	}
	
	.text .inner {
		padding: 0 20px 0 20px;
	}
	
}