/* MY CODE */

/* start of nav styling */

*
{
	text-decoration: none !important;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}



html
{
	scroll-behavior: auto;
}

 body
{
	background-color: #ddb892 !important;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;

}

header nav
{
	text-decoration: none;
	font-size: 14px;
	width: 100%;
	height: 100px;
	background-color: #e6ccb2 !important;

}

/* testing to see if this is needed or not*/
 a
 {

	font-size: 14px;
	line-height: 45px;
	padding: 0px 20px;
}


 header nav ul
{
		float: left;
		display: block;
		margin: 0 auto;
		width: fit-content;
}

header nav ul li
{
float:left;
list-style: none;
position: center;
}  /*how do you get it so that the nav is set to the middle of the screen? */


/* Home Styling */

.nav
{
 width: 100%;
 height: 100vh;
 position:relative;
 padding:0 5%;
 display:flex;
 align-items:center;
 justify-content:center;
}

.nav nav
{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	padding: 20px 8%;
	display:flex;
	align-items:center;
	justify-content:space-between;
} */


.nav nav ul li
{
 list-style: none;
 display: inline-block;
 margin: 40px;
}

.nav nav ul li a
{
 text-decoration: none;
 font-size: 20px;
 color: #fff;
}

.nav nav ul a:hover
{
	padding: 0x 10px;
	background-color: #7b9e89;
}

.nav nav a
{
	display: inline-block;
	color: #fff;
	border: 2px solid #fff;
	padding: 14px 17px;
	border-radius: 50px;
	margin-top: 20px;
}

.hero h1
{
	font-size: 100px;
	color: #fff;
	font-weight: 600;
	font-style: italic !important;
	text-align: center !important;
	justify-content: space-between;
}
@media only screen and (min-width: 300px) and (max-width: 600px)
{
	.hero h1
	{
		font-size: 50px;
		font-weight: 600;
	}
}
@media only screen and (min-width: 600px) and (max-width: 900px)
{
 .hero h1
 {
	 font-size: 75px;
	 font-weight: 600;
 }
}


/* end of nav and middle of the home page */

/* beginning of about me page */

.content2 h1
{
	font-size: 100px;
	color: #fff;
	font-weight: 600;
	font-style: italic;
 	text-align: center;
}

@media only screen and (min-width: 300px) and (max-width: 600px)
{
	.content2 h1
	{
		font-size: 50px;
		font-weight: 600;
	}
}
@media only screen and (min-width: 600px) and (max-width: 900px)
{
 .content2 h1
 {
	 font-size: 85px;
	 font-weight: 600;
 }
}



.image
{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
background-color: #fff;
padding-left: 50px;
padding-bottom: 75px;
justify-content: space-between;

/*this will create a circle for your images, this image will be stand still, copy this code and figure out how to create a cross dissolve for your photos*/
}
 #aboutmephoto
 {
	 width:95%;
	 height: 95%;
	 border-radius:50%;
	 border: 10px solid #e6ccb2;
 }


#abouttext
{
		/*position: relative;*/
		width: 100%;
		height:100%;
		/*left: 130px;*/
		justify-content: space-between;
		text-align: center;
		font-size: 20px;
		background-color: #7b9e89 !important;

}

/*.image .txt
{
	/*position: relative;
	width: 100%;
	height:100%;
	/*left: 130px;
	justify-content: space-between;
	background-color: #7b9e89;
} */

/*.image .txt .box
{
	position: relative;
	width: 400;
	height: 700;
	background: 000;
	float: left;
	margin: 20px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 10px;
}*/

.image .txt .box p
{
 font-size: 40px;
}

/* end of about me*/


/* beginning of video */


.content3 h1
{
	font-size: 100px;
	color: #fff;
	font-weight: 600;
	font-style: italic !important;
	text-align: center !important;
	justify-content: space-between;

}
@media only screen and (min-width: 300px) and (max-width: 600px)
{
	.content3 h1
	{
		font-size: 50px;
		font-weight: 600;
	}
}
@media only screen and (min-width: 600px) and (max-width: 900px)
{
 .content3 h1
 {
	 font-size: 85px;
	 font-weight: 600;
 }
}
#vidtext
{
		/*position: relative;*/
		width: 100%;
		height:50%;
		/*left: 130px;*/
		justify-content: space-between;
		font-size: 20px;
		text-align: center;
		background-color: #7b9e89 !important;
		font-size: 16px;

}


/*.txt3
{
width: 100%;
height:100%;
/*left: 130px;
justify-content: space-between;
background-color: #7b9e89;
}

 .txt3 .box3
{
		width: 400;
		height: 700;
		background: 000;
		margin: 20px;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10px;
}*/

/*.content3  p
{
 font-size: 0px;
}*/

iframe
{
	width: 100%;
	height: 300px;
}
/* this is getting it to be responsive the issue is, the thumbnail is off  end of video*/

/* beginning of photo */

.content4 h1
{
	font-size: 100px;
	color: #fff;
	font-weight: 600;
	font-style: italic !important;
	text-align: center !important;
	justify-content: space-between;

}
@media only screen and (min-width: 300px) and (max-width: 600px)
{
	.content4 h1
	{
		font-size: 50px;
		font-weight: 600;
	}
}
@media only screen and (min-width: 600px) and (max-width: 900px)
{
 .content4 h1
 {
	 font-size: 85px;
	 font-weight: 600;
 }
}

.content4
{
	text-align: center;
}

.content4 .image
{
	height:50%;
}
#phototext
{
		/*position: relative;*/
		width: 100%;
		height:100%;
		/*left: 130px;*/
		justify-content: space-between;
		text-align: center;
		font-size: 20px;
		background-color: #7b9e89 !important;

}

/*.text
{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
background-color: #fff;
}

 .txt
{
	width: 375px;
	height:365px;
	margin: auto;
	background-color: #7b9e89;
}

 .txt .box
{
	width: 400;
	height: 600;
	background: 000;
	float: left;
	margin: 20px;
	overflow: hidden;
	justify-content: center;
}
 .txt .box p
{
 font-size: 20px;
}
*/


.photos
{
background-color: #fff;
/*padding-bottom: 100px; */
}
/* end of photo */


/* beginning of graphic design */

  h3
{
	display: block;
	font-size: 50px !important;
	color: #fff;
	font-weight: 600 !important;
	font-style: italic;
	text-align: center !important;
}

/* start of graphic design */

.btn
{
	color: #e6ccb4 !important;
	background-color: #b08968 !important;
}


/* start of footer*/


.footer
{
	background-color: #e6ccb4 !important;
	height: 100px;
}

.socials
{
	height: 50px;
	width: 50px;
}

 /*end of footer*/