:root { background: #44443f; }

h1 {  
	margin: 0;
	padding: 5px;
	font-size: 75px;
}

.me {
    font-size: 35px;
    color: #fffb63;
    margin: 10px 0 0 5px
}

.contact {
	color: white;
	font-size: 20px;
	margin-top: 15px;
}

.contact a { color: white; }

.left { margin-bottom: 55px; }

@media (min-width: 760px) { 
    .left { 
		float: left;
		width: 50%;
	}
}

.info {
	margin-top: 30px;
	margin-left: 10px;
	padding-bottom: 50px;
}

@media (min-width: 760px) { 
    .info { 
		text-align: right;
		margin-right: 20px;
		padding-bottom: 0;
	}
}

header {
	background-color: #47bec9;
}

.headings {
	font-size: 40px;
	margin: 0px;
	color: #fffb63;
}

/**
 * Apply this to elements that have floated elements inside of them.
 */
 
.clearfix:after{
    clear: both;
    content: "";
    display: block;
}

/** This is code for the bottom half of the page with a gray background   **/
@media (min-width: 760px) { 
    .right { 
		float: left;
		width: 50%;
	}
}

.bheading{
	font-size: 35px;
	margin: 30px 20px;
	color: #fffb63;
}

.binfo{
	color: white;
	margin: 0 0 15px 40px;
}