@charset "UTF-8";
/* CSS Document */
/* desktop layout */

body, html {
	height: 100%;
	margin: 0;
	font-family: san-serif;
	background-color: #ffffff; /* White */
}

.resize_img {
    max-width: 100%;
    height: auto;
	padding: 0;
	margin: 0;
}

#navigation {
	height: auto;
	padding-top: 2%;
	width: 25%;
	float: left;
	background-color: #ffffff; /* white */
}

#banner {
	clear: all;
	height: auto;
	width: 75%;
	float: right;
	background-color: #ffffff; /* white */
}

#poem {
	height: auto;
	width: 25%;
	float: left;
	padding-top: 2%;
	background-color: #ffffff; /* white */
	text-align: center;
	font-size: 20px;
}
	
.poem_title {
	font-size: 45px;
	font-family: 'Caveat Brush', cursive;
	color: #0358cd; /* blue */
	padding-bottom: 5%;
}

#content {
	height: auto;
	width: 73%;
	padding: 0% 1%;
	float: right;
	background-color: #ffffff; /* white */
	font-size: 20px;
}

#resume_title {
	width: 23%;
	height: auto;
	padding: 1%;
	float: left;
	/* text-transform: uppercase; */
	background-color: #ffffff; /* white */
}

#resume_data {
	width: 72%;
	height: auto;
	padding: 1%;
	margin-left: 1%;
	margin-bottom: 1%;
	float: left;
	background-color: #ffffff; /* white */
}

#music {
	height: inherit;
	width: 98%;
	padding: 1%;
	background-color: #ffffff; /* #999999 gray */
	overflow: hidden;
}

#music_title {
	float: left;
	height: auto;
	width: 48%;
	padding: 0% 1%;
	background-color: #ffffff; /* #B22F51 purple */
}

#music_song {
	float: left;
	height: auto;
	width: 48%;
	padding: 0% 1%;
	background-color: #ffffff; /* green */
}
	
#footer {
	clear: both;
	background-color: #ffffff; /* white */
	width: 98%;
	height: auto;
	padding: 1%;
	text-align: center;
	}

.headshot {
	width: auto;
	height: auto;
	float: left;
	background-color: #ffc501; /* yellow */
	margin-right: 10px;
	padding: .6% .6% .2% .6%;
	/* border-style: solid;
	border-color: #182f58;  blue */
}

.title {
	width: auto;
	height: auto;
	font-size: 45px;
	font-family: 'Caveat Brush', cursive;
	text-align: center;
	color: #0358cd; /* blue */
  	-webkit-text-fill-color: #ffc501; /* Will override color (regardless of order) yellow */
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: #0358cd; /* blue */
}

@media only screen and (max-width: 320px) {
	#navigation {
		height: auto;
		padding-top: 2%;
		width: 100%;
		float: left;
		background-color: #ffffff; /* white */
	}
	
	#banner {
		height: auto;
		width: 100%;
		float: right;
		background-color: #ffffff; /* white */
	}
	
	#poem {
		height: auto;
		width: 98%;
		float: left;
		padding: 2%;
		background-color: #ffffff; /* white */
		text-align: center;
		font-size: 20px;
	}	
	
	#content {
		height: auto;
		width: 98%;
		padding: 0% 1%;
		background-color: #ffffff; /* white */
		font-size: 20px;
	}

}