/*The height is set to 100%, so the body can be 100%, so the
footer can rest on the bottom of the page.*/
html{
	height: 100%;
}
/*The min-height property is for the benefit of the footer*/
body{
	min-height: 100%;
	position: relative;
}

/*padding on the bottom must make space for the footer*/
main{
	padding-bottom: 150px;
}

.title{
	font-size: 35px;
}

#call-to-action{
	width: 30%;
	min-width: 200px;
	margin: 20vh auto 42vh auto;
	text-align: center;
	text-decoration: none;
	display: block;
}

.bio{
	font-size: 4vw;
}
.name{
	font-size: 6vw;
}



/*
min-height of body is set to 100% to make sure the 
footer always rests on the bottom of the page. 
*/
footer{
	background: #555;
	color: #fff;
	
	position: absolute;
	height: 150px;
	width: 100%;
	bottom: 0;
	
	text-align: center;
}

.footer-element{
	text-align: center;
}


/*Rules here will only apply to screens whose width 
is greater than 600px*/
@media only screen and (min-width: 601px) {
.title{
	font-size: 5vw;
}
.bio{
	font-size: 2vw;
}
.name{
	font-size: 3vw;
}
}