body {
	background-image: url("beach.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	color: snow;
  }

::selection {
	color: snow;
	background: #EA8FA1;
}

footer {
	position: fixed;
 	bottom: 0;
	left: 7%;
	right: 0;
	margin: 20px;
}

#header1 {
	display: inline-block;
	font-family: 'Georgia', sans-serif;
	font-size: 68pt;
	margin: 6pt auto 6pt;
	letter-spacing: 2px;
	/*color: #EA8FA1;*/
	background: linear-gradient(#EA8FA1 40%, snow);
  	background-clip: text;
	color: transparent;
}

#header1::before {
	content: attr(data-text);
	position: absolute;
 	left: auto;
	top: auto;
	width: 100%;
	height: 100%;
	z-index: -1;
  	color: snow;
  	text-shadow: -1px 0 snow, 0 1px snow, 1px 0 snow, 0 -1px snow;
}

#header2 {
	display: inline-block;
	font-family: 'Georgia', sans-serif;
	font-size: 48pt;
	margin: 6pt auto 6pt;
	letter-spacing: 2px;
	/*color: #EA8FA1;*/
	background: linear-gradient(#EA8FA1 40%, snow);
  	background-clip: text;
	color: transparent;
}

#header2::before {
	content: attr(data-text);
	position: absolute;
 	left: auto;
	top: auto;
	width: 100%;
	height: 100%;
	z-index: -1;
  	color: snow;
  	text-shadow: -1px 0 snow, 0 1px snow, 1px 0 snow, 0 -1px snow;
}

#container {
	box-sizing: border-box;
	position: fixed;
	max-height: 100%;
	overflow: auto;
	max-width: 600px;
	top: 0;
	right: 10%;
	bottom: 0;
	margin: 0;
	padding: 10px;
	z-index: 1;
	background: linear-gradient(#004D66AA 40%, #00E6E6AA);
	border-right: solid 1px snow;
	border-left: solid 1px snow;
}

h4 {
	display: inline-block;
	font-family: 'Georgia', sans-serif;
	font-size: 16pt;
	margin: 6pt auto 2pt;
	letter-spacing: 2px;
	color: #EA8FA1;
	text-shadow: -1px 0 snow, 0 1px snow, 1px 0 snow, 0 -1px snow;
}

p {
	font-family: 'Helvectica Neue', 'helvetica', sans-serif;
	font-size: 12pt;
}

ul {
	margin: 2px;
	padding: 2px 2px 2px 0;
	list-style-image: url('star.png'); 
	list-style-position: inside;
	font-family: 'Helvectica Neue', 'helvetica', sans-serif;
	font-size: 12pt;
}

#ProfilePic {
	float: right;
	width: 200px;
	height: 200px;
	margin: 5px;
}

@media screen and (max-width: 1600px){
	
	#header1 {
	display: none;
}
		
}

@media screen and (min-width: 1600px){

#header2 {
	display: none;
}
	
}
@media screen and (max-width: 700px){

#container {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
}
	
}