/* Scale 8pt, 12pt, 18pt, 27pt */

html {
	background: #efefef url('images/headshot.jpg') no-repeat bottom right fixed; 
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: 20%;
	
}

body {
	font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
	font-weight: 200;
	font-size: 100%;
}

#wrapper {
	background-color: #efefef;
	background-color: rgba(239, 239, 239, 0.5);
	padding: 16pt;
	width: 50%;
}

h2 {
	font-size: 4em;
	font-weight: bold;
	margin: 0 0;
	line-height: 1.0em;
}

p, a, li {
	font-size: 1em;
	line-height: 1.0em;
}

p {
	margin: 1em 0;
}

a, a:hover, a:visited, a:active {
	color: #2C3270;
	font-weight: 500;
	text-decoration: underline;
}

ul {
	font-size: 1.25em;
	/* margin: 2em 0; */
}

#intro {
	font-size: 1.5em;
}

#greeting {
	text-align: center;
	height: auto;
	text-align:center;
}

#address {
    font-size: 1.2em;
}

@media only screen
	and (max-width: 1024px) {
	
		html {
			background: #efefef;
		}
	
		body {
			padding-top: 2em;
			padding-bottom: 5em;
			margin: 0 2.5%;
		}
		
		#wrapper {
			padding: 0;
			width: auto;
		}

		h2 {
			font-size: 3em;
			font-weight: bold;
		}
		
		p, a, li {
			max-width: none;
			line-height: 1.25em;
		}
		
		#greeting:before {
			background: #efefef url('images/headshot-crop.jpg') top center no-repeat;
			background-size: contain;
			content: "";
			display: block;
			height: 350px;
		}
		
	}
	
@media only screen 
  	and (min-device-width: 375px) 
  	and (max-device-width: 667px) 
  	and (-webkit-min-device-pixel-ratio: 2) { 
	  	body {
			font-size: 100%;
		}
		
		p, a, li {
			max-width: none;
		}
		
		h2 {
			font-size: 2em;
		}
		
		#intro:before {
			height: 700px;
		}
  }