@font-face {
	font-family: Georgia;
	font-weight: normal;
	font-style: normal;
}

html, body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

}
h1, h2{
	margin:0;
	padding:0;
}
body{
	text-align: center;
	background: #33ff44; /* Old browsers */
	background: -moz-linear-gradient(left, #33ff44 0%, #33ffc0 100%);
	background: -webkit-linear-gradient(left, #33ff44 0%,#33ffc0 100%);
	background: linear-gradient(to right, #33ff44 0%,#33ffc0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ff44', endColorstr='#33ffc0',GradientType=1 );
}
a{
	color:grey;
}
#content{
	border: 16px solid grey;
	width: calc(99.6% - 226px);
	height: calc(98.6% - 175px);
	display:inline-block;
	margin-top: 80px;
	position: relative;
}
#head{
	color: grey;
	text-align: left;
	position:absolute;
	top: 45px;
	left:65px;
	padding-right: 5px;
}
h1{
	font-family: Georgia;
	font-size: 80px;
	line-height: 80px;
	font-weight: normal;
	margin-bottom: 28px;
}
h2{
	font-family: Georgia;
	font-size: 30px;
	line-height: 30px;
	font-style: italic;
	font-weight: normal;
}
#footer{
	position: absolute;
	text-align: left;
	bottom: 55px;
	left: 55px;
}



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

	#content{
		width: calc(99.6% - 86px);
		height: calc(98.6% - 83px);
		margin-top: 40px;
	}
	#head{
		top: 25px;
		left:35px;
	}
	h2{
		line-height: 40px;
	}
	#footer{
		bottom: 48px;
		left: 36px;
	}
}

@media only screen and (max-width: 850px){
	body{
		background: #33ffc0; /* Old browsers */
		background: -moz-linear-gradient(top, #33ffc0 1%, #33ff44 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #33ffc0 1%,#33ff44 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #33ffc0 1%,#33ff44 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ff44', endColorstr='#33ffc0',GradientType=0 ); /* IE6-9 */
	}
	#content{
		height: calc(98.6% - 76px);
		border: 16px solid grey;
	}
	h1{
		font-size: 60px;
		line-height: 60px;
		margin-bottom: 24px;
	}
	h2{
		font-size: 25px;
		line-height: 32px;
	}
	#head{
		top: 28px;
		left:31px;
	}
	#footer{
		bottom: 40px;
		left: 36px;
	}
	
}



@media only screen and (max-width: 600px){
	body{
		background: #33ffc0; /* Old browsers */
		background: -moz-linear-gradient(left, #33ffc0 0%, #33ff44 100%);
		background: -webkit-linear-gradient(left, #33ffc0 0%,#33ff44 100%);
		background: linear-gradient(to right, #33ffc0 0%,#33ff44 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ff44', endColorstr='#33ffc0',GradientType=1 );
	}
	#content{
		width: calc(99.6% - 39px);
		height: calc(98.6% - 41px);
		margin-top: 20px;
	}
	#head{
		top: 12px;
		left:18px;
	}
	h1{
		font-size: 40px;
		line-height: 40px;
		margin-bottom: 10px;
	}
	h2{
		font-size: 20px;
		line-height: 25px;
	}
	
	#footer{
		bottom: 22px;
		left: 18px;
	}
}


@media only screen and (max-width: 400px){
	body{
		background: #ff3300; /* Old browsers */
		background: -moz-linear-gradient(top, #33ff44 1%, #33ffc0 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #33ff44 1%,#33ffc0 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #33ff44 1%,#33ffc0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ff44', endColorstr='#33ffc0',GradientType=0 ); /* IE6-9 */
	}
}