@charset "UTF-8";

section {
	width: 100%;
	min-width: 320px;
	max-width: 1200px;
	margin: 0 auto;
}

header{
	width: 100%;
	margin: 0 auto;
}

#logo {
	width: 100%;
	margin: 0 auto;
}

#logo img{
	width: 40%;
	height: 70%;
	margin: 0 auto;
	display: inherit;
}

#name {
	width: 100%;
	margin: 0 auto;
	padding-top: .5em;
	padding-bottom: .5em;
	display: inherit;

}

#name h1{
	width: 95%;
	font-size: 2.5em;
	text-align: center;
	color: #f1c4dc;
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: bold;
}

nav {
	width: 100%;
	height: 2.5em;
	text-align: center;
	background-color: #f1c4dc;
}

li {
	display: inline-block;
	margin-left: 1.5em;
	margin-right: 1.5em;
	line-height: 2.5em;
	text-transform: uppercase;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

a{
	color: black;
	font-size: .75em;
	letter-spacing: .1em
}

a:hover{
	color: white;
	text-decoration: underline;
}

.hide{
	display: none;
}

.hide:hover{
	color: white;
	text-decoration: underline
	
}

article {
	width: 100%;
	margin: 0 auto;
}
 
#aboutme{
	width: 100%;
	margin: 0 auto;
	background-color: #fce4eb;
	padding-bottom: .5em;
}

#image1 {
    width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
	
}

#image1 img{
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
}

.title {
	
	width: 100%;
	margin: 0 auto;
	line-height: 2em;
	padding-top: 1em;
	padding-bottom: .5em;
	
}

.title h2{
	width: 100%;
	margin: 0 auto;
	font-size: 2em;
	text-align: center;
   font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: bold;
	
}

#aboutmetxt{
	 width: 90%;
	margin: 0 auto;
	padding-bottom: 1em;
	
}

#aboutmetxt p{
	width: 100%;
	text-align: inherit;
	line-height: 1.25em;
}

#work{
	width: 100%;
	margin: 0 auto;
	background-color: #ffc2d1;
	padding-bottom: .5em;
	
}

#image2 {
	 width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
}

#image2 img{
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
}

#box1{
	width: 100%;
	margin: 0 auto;
	margin-top: .5em;
	margin-bottom: 1.5em;
	line-height: 1.5em;
	background-color: #ff8fab;
	
}

#box1 h2{
	text-align: center;
	font-size: 1.5em;
	  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#box1 h2:hover{
	color: white;
	text-decoration: underline
	
}

#box2{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 1.5em;
	line-height: 1.5em;
	background-color: #ff8fab;
	
}

#box2 h2{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#box2 h2:hover{
	color: white;
	text-decoration: underline
	
}

#box3{
	width: 100%;
	margin: 0 auto;
	margin-bottom:  1.5em;
	line-height: 1.5em;
	background-color: #ff8fab;
	
}

#box3 h2{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#box3 h2:hover{
	color: white;
	text-decoration: underline
	
}

#box4{
	width: 100%;
	margin: 0 auto;
	margin-bottom:  1.5em;
	line-height: 1.5em;
	background-color: #ff8fab;
	
}

#box4 h2{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#box4 h2:hover{
	color: white;
	text-decoration: underline
	
}

#box5{
	width: 100%;
	margin: 0 auto;
	margin-bottom:  1.5em;
	line-height: 1.5em;
	background-color: #ff8fab;
	
}

#box5 h2{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#box5 h2:hover{
	color: white;
	text-decoration: underline
	
}

#resume{
	margin: 0 auto;
	background-color: #ffb3c6;
	padding-bottom: .5em;
	
}

#image3 {
	 width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
}

#image3 img{
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
}

#resumepic {
	width: 100%;
	margin: 0 auto;
	padding-top: 1em;
	
}

#resumepic a{
	
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
	
}

#resumepic img{
	
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
	
}

#connect {
	width: 100%;
	margin: 0 auto;
	background-color: #ff8fab;
	padding-bottom: .5em;
		
}

#image4 {
	 width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
}

#image4 img{
	width: 80%;
	height: 40%;
	margin: 0 auto;
	display: inherit;
	
}

#connectbox1 {
	width: 100%;
	margin: 0 auto;
	margin-top: .5em;
	margin-bottom: .5em;
	line-height: 1.5em;
	background-color: #fce4eb;
	
}



#connectbox1 h3{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	
}

#connectbox1 h3:hover{
	color: white;
	text-decoration: underline
	
}

#connectbox2 {
	width: 100%;
	margin: 0 auto;
	margin-top: .5em;
	margin-bottom: .5em;
	line-height: 1.5em;
	background-color: #fce4eb;
	
	
}

#connectbox2 h3{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	
}

#connectbox2 h3:hover{
	color: white;
	text-decoration: underline
	
}

#connectbox3 {
	width: 100%;
	margin: 0 auto;
	margin-top: .5em;
	margin-bottom: .5em;
	line-height: 1.5em;
	background-color: #fce4eb;
	
}

#connectbox3 h3{
	text-align: center;
	font-size: 1.5em;
	 font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	
}

#connectbox3 h3:hover{
	color: white;
	text-decoration: underline
	
}




@media (min-width: 400px){
	
	
	
	#logo img{
		width: 35%;
	}
	
	#name{
		margin: auto 0;
		display: inline;
	}
	
	#name h1{

		font-size: 3em;
	}
	
	
	a{
		font-size: 1em;
	}
}



@media (min-width: 600px) {
	
		#name{
		margin: auto 0;
		display: inline;
	}
	
	#name h1 {
		font-size: 4.5em;
	}
	
	#image1, #image2, #image3, #image4 {
		width: 70%;
	}
	
	#resumepic img {
		width: 60%;
	}
}




@media (min-width: 750px){
	
	#logo img{
		width: 25%;
	}
	
	#name h1{
		font-size: 4.5em;
	}
	
	.hide {
		display: inline-block;
	}


.title {
	float: left;
	width: 60%;
	border-bottom: solid;
	border-bottom-color: #ef4782;
	padding-top: 1.5em;
	
}

.title h2{
	text-align: left;
}

#aboutme, #work, #resume, #connect {
	float: left;
	width: 100%;
	padding-bottom: 1em;
}

#image1{
	width: 40%;
	float: left;
	
	
}

#image1 img{
	padding-top: 2.5em;
	
}



#aboutmetxt {
	padding-top: .5em;
	float: left;
	width: 60%;
}

#aboutmetxt P{
	text-align-last: left;
}

#image2{
	width: 40%;
	float: left;
	
	
}

#image2 img{
	padding-top: 2.5em;
	
}

#box1 {
	float: right;
	width: 60%;
	margin-top: 2em;
	line-height: 2em;
}

box1 h2{
	font-size: 2em;
}

#box2, #box3, #box4, #box5 {
	float: right;
	width: 60%;
	line-height: 1.5em;
}


#image3{
	width: 40%;
	float: left;
	
	
}

#image3 img{
	padding-top: 2.5em;
	
}

#resumepic{
	float: right;
	width: 60%;
	
}
	
	

#image4{
	width: 40%;
	float: left;
	
	
}

#image4 img{
	padding-top: 2.5em;
	
}

#connectbox1 {
	float: right;
	width: 60%;
	margin-top: 2em;
	line-height: 2em;
}

#connectbox2 {
	float: right;
	width: 60%;
	margin-top: 2em;
	line-height: 2em;
}

#connectbox3 {
	float: right;
	width: 60%;
	margin-top: 2em;
	line-height: 2em;
}
}





@media (min-width: 900px){

#logo {
	width: 80%;
}

#name h1{
	font-size: 6em;
	
}

#image2 {
	padding-top: 4em;
 
}

#box1, #box2, #box3,#box4,#box5{
	
	line-height: 2.5em;
}

#box1, #box2, #box3,#box4,#box5{
	font-size: 1.25em;
}

#image3{
	padding-top: 3em;
}
	
	#resumepic img{
		padding-left: 6.5em;
	}


#connectbox1, #connectbox2, #connectbox3 {
	line-height: 2.5em;
}
	
}



@media (min-width: 1050px){
	
	
	
	a{
		font-size: 1.25em;
	}
	
	
	
	#aboutmetxt P{
		line-height: 1.5em;
	}
	
	#connectbox1{
		margin-top: 5em;
	}
	
}

@media (min-width: 1200px){
	
	#logo {
		width: 70%;
	}
	
	#name {
		padding-left: 3em;
	}
	#name h1{
		font-size: 7em;
	}
	.title h2{
		font-size: 2.5em;
	}
	
	
}