body {
color: #ddd;
background-color: #555;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h1, h2, h3, .profilePic {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
font-weight: bold;
text-align: right;
width: 40%;
padding: 0% 0% 1% 0%;
}

h1 {font-size: 3rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.2rem;}

a:link, 
a:active,
a:visited,
a:hover {
color: #AAF;
text-decoration: none;
}

#profilePic {
float:left;
width: 40%;
padding: 1% 1.25% 1% 1.25%;
}

#mainText {float: right;
width: 55%;
padding: 0% 1.25% 2% 1.25%;
margin-top: 2%;}

img {border-radius: 10%;
margin: 0;
width: 100%;
}

li {
font-size: 1.2rem;
line-height: 1.8rem;
padding-left: 2rem;
background: url('../images/finger.png') 0% 0% / 1em 1em no-repeat ;
}

.extraInfo li 
 {
font-size: 0.8rem;
line-height: 1.1rem;
}

@media  screen and (max-width: 840px)
{
ul, h1, h2, h3,
#profilePic , #mainText 
	{width: 98%;}

 h1, h2, h3 {text-align: center;}

 h3 {line-height: 1.5rem; }

 li {padding-bottom: 0.5rem;}
 }