body {
	font-size: x-large;
	font-family: 'Merriweather', serif;
	color: #222222;
	line-height: 1.5em;
	width: 80%;
	max-width: 850px;
	min-width: 320px;
	margin: 0 auto;
}

p {
    font-size: .8em;
}

h1 {
	font-size: 3.25em;
	text-align: center;
	font-family: 'Staatliches', sans-serif;
	font-weight:100;
}

header {
	padding: .25em;
	border-bottom-style: solid;
	border-color: #BD006B;
	border-width: 1.75px;
	margin: .25em 0 1em 0;
}

#main_content a {
	color: #BD006B;
  text-decoration: none;
}

#main_content a:hover {
	text-decoration: underline;
}

#homepage {
	text-align: center;
}

#image img {
	width: 49%;
	margin: .5em auto 0 auto;
	/*border-radius: 3px;*/
}

.profile_photo {
	margin: .5em auto 0 auto;
	width: 275px;
	border-radius: 20px;
}

.menu {
	list-style: none;
	padding: 0;
	width: 100%;
	height: 50px;
	position: relative;
	font-family: 'Staatliches', sans-serif;
	font-size: .92em;
}

.menu li {
	float: left;
	width: 19.5%;
	height: 100%;
	display: block;
	text-align: center;
	line-height: 2.25em;
	background-color: #333333;
	border: solid;
	border-width: 1px;
	border-color: #fff;
  /*border-radius: 3px;*/
	-webkit-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}

.menu a {
	width: 100%;
	height: 100%;
	color: #fff;
	display: block;
	text-decoration: none;
}

a.active {
	background-color: #AAAAAA;
  color: #000;
	pointer-events: none;
	display: block;
  border-color: #AAAAAA;
  border-radius: 2px;
}

::selection {
    background: #C83C8B;
    color: #fff;
}

::-moz-selection {
    background: #C83C8B;
    color: #fff;
}

.menu li:nth-child(1):hover {
	top: 0;
	background-color: #666666;
	-webkit-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

.menu li:nth-child(2):hover {
	top: 30px;
	background-color: #666666;
	-webkit-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

.menu li:nth-child(3):hover {
	top: 60px;
	background-color: #666666;
	-webkit-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

.menu li:nth-child(4):hover {
	top: 90px;
	background-color: #666666;
	-webkit-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

.menu li:nth-child(5):hover {
	top: 90px;
	background-color: #666666;
	-webkit-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

footer {
	border-top-style: solid;
	border-width: 1.75px;
	border-color: #BD006B;
	padding: .25em;
	margin: 0 0 1em 0;
}

footer img {
	width: 1.75em;
	border: none;
  	padding: .5em;
	border-radius: 3px;
}

/* max display 1024px */

@media screen and (max-width: 1024px) {
	body {font-size: 1.50em;}
	h1 {font-size: 3.25em;}
	.menu {height: 47px;}
	.menu li {width: 19.6%}
}

/* max display 767px */

@media screen and (max-width: 767px) {
	body {font-size: large;}
	h1 {font-size: 3.25em;}
	#main_content {font-size: 1.25em; line-height: 1.5em; margin: 3em 0 0 0;}
	.menu {height: 150px;
		border-radius: 3px;}
	.menu li {width: 100%; height: 50px; line-height: 3.25em;}
	.menu a {font-size: 1.5em;}
	a.active {border-radius: 3px;}
	.round_photo {margin: .5em auto 0 auto;}
	#image img {width: 100%; margin: .5em auto 0 auto}
	footer img {width: 2.25em; padding: .32em;}

.menu li:nth-child(1):hover {
	top: 0;
	border-radius: 3px;
}

.menu li:nth-child(2):hover {
	top: 30px;
	border-radius: 3px;
}

.menu li:nth-child(3):hover {
	top: 60px;
	border-radius: 3px;
}

.menu li:nth-child(4):hover {
	top: 90px;
	border-radius: 3px;
}


/* max display 550px */

@media screen and (max-width: 550px) {
	body {padding: 0 20px;}
	h1 {font-size: 2.25em;}
	.round_photo {width: 300px; margin: .75em auto 0 auto}
	#main_content {font-size: 1.1em; margin: 2em 0 0 0;}
	.menu li {width: 100%; height: 40px; line-height: 2.5em;}
	.menu a {font-size: 1em;}
	a.active {
		border-radius: 3px;}
	footer img {width: 1.35em;}
}