body{
	margin: 00px 0 0 0;
	width: 100%;
	font-size:16px;
	font-family: "Comic Sans MS", sans-serif;
	letter-spacing:1.2px;
}

h1{
	color:white;
	font-size: 4vw;
	padding-bottom: 5px;
}

h2{
	color:white;
	font-size: 1vw;
}

p{
	color:white;
	font-size: 16px;
}

a:link{
	color: white;
}

a{
	color:white;
}

.image{
	height:85%;
	width:100%;
	max-width:100%;
}

.theframe{
	height:90%;
	width:500px;
	max-width:100%;
}

.mainImage{
	border-radius: 50%;
	vertical-align: middle;
	height: auto;
	width: auto;
  max-width: 100%;
}

.image2{
  width: auto;
  height: 100px;
  max-width: 100%;
}

/*---responsive------*/
@media screen and (max-width:1366px) {

	body{
		font-size: 2vw;
	}

	h1{
		font-size:20px;
	}

	h2{
		font-size:16px;
	}

	p{
		font-size: 14px;
	}

	.image{
		max-width:100%;
		height:auto;
	}

	.theframe{
		height:90%;
		width:500px;
		max-width:100%;
	}

	.image2{
    width: auto;
    height: 50px;
    max-width: 100%;
  }

}

@media screen and (max-width:420px) {

	body{
		margin: 00px 0 0 0;
		max-width:100%;
		font-size:2vw;
	}

	h1{
		font-size:20px;
	}

	h2{
		font-size:10px;
	}

	p{
		font-size: 9px;
	}

	.nav li button{
		visibility: visible;
	}

	.image{
		max-width:100%;
		width: 100%;
		height:auto;
	}

	#maintext{
		width:100%;
	}

	.theframe{
		height:100%;
		width:100%;
		max-width:100%;
	}


}