/*this is the standard menu with the lemon background */
header{
	background-image: url("Lemons.png");
  background-size: cover;
  font-size: 3vw;
  color: transparent;
  /*I wasn't sure how to adjust the size of the header so I used 
  transparent text to make it the desired size*/
}
body{
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1vw;
}


strong{
	color: #F4F40F;
	font-weight: 900;
	/*the font weight didn't change much but the important words 
	are now in yellow*/
}

/*this is the styling and flex for the paras of text on the about 
page*/
.flexLeft
{
	
	font-size: 1.25vw;
	line-height: 1.25;
	/*line height was important to make sure it felt more readable*/
	width: 20vw;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: justify-start;
	margin-left: 5vw; 
	color: white;
	background-color: black;
	padding: 3vh;
}

.flexLeft.one
{
	position: absolute;
	top: 35vw;
	left: 7vw;
	
}
.flexLeft.two{
position: absolute;
	top: 55vw;
	left: 7vw;
	
}

.flexLeft.three
{
position: absolute;
	top: 45vw;
	left: 60vw;
	
}



 
.z
{
	background-color: transparent;
	
	padding: 1vh;
	position: absolute;
	width: 25vw;
	height: 30vw;
	top: 120vw;
	left: 40vw;
	
}


.title
{
	
	letter-spacing: 2vw;
	color: #F4F40F;
	font-size: 4vw;
	font-family: 'Chango', cursive;
	text-shadow: 4px 4px black;
	position: absolute;
	top: 18vw;
	left: 38vw;
}


/*this is the image on the about page of a painting I made*/
.aboutIMG
{
	
	width: 35vh;
	height: auto;
	position: absolute;
	top: 72vh;
	left: 72vh;
	z-index: 2;
	/*I initially thought of overlapping the image on the text so 
	I added the z-index, I left it in there in case*/
}



.logo
{
position: absolute;
width: 10vw;
height: auto;
top: 2vw;
left: 4vh;
}

/*these next few buttons are for the standard menu 
they transition between different colors for text, background and border
I also made sure that the button that describes the page the 
user is on is highlighted.

I made the ease 0s so that the buttons respond quickly and are
more lively.*/


.example_c {
color: black;

text-decoration: none;
text-shadow: 4px 4px #F4F40F;
background: white;
padding: 20px;
border: 4px solid black !important;
display: inline-block;
transition: all 0.4s ease 0s;
font-size:1.5vw;

}



.example_c.about:hover{
color: white;
background: black;
/*these are options I used to keep this button "selected"*/
text-shadow: none;
position: absolute;
left: 30vw;
top: 7vw;
}

.example_c.about{
color: white;
background: black;
/*these are options I used to keep this button "selected"*/
text-shadow: none;
position: absolute;
left: 30vw;
top: 7vw;
}

.example_c.proj{
text-shadow: none;
position: absolute;
left: 40vw;
top: 7vw;
}

.example_c.bucket{
text-shadow: none;
position: absolute;
left: 51vw;
top: 7vw;
}

.example_c.love{
text-shadow: none;
position: absolute;
left: 63vw;
top: 7vw;
}

.example_c:hover {
color: #ffffff !important;
background: black;
border: 4px solid white !important;
transition: all 0.4s ease 0s;
text-shadow: none;


}


<!--  I tried flex initially but I think I got 
frustrated or panicked when it didn't work and 
since I was having a whole crisis even though it 
was more frustrating I decided them to place them manually -->

/*.pos1{
	/*display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-right: -200px auto;*/
	position: ;
  display: grid;
  grid-template-columns: 23% 23% 23% 23% 23% 23%;
  grid-template-rows: 23% 23% 23% 23% 23% 23% ;
}*/
/*#aboutG
{
	grid-column-start: 2;
	grid-column-end: 5;
}
*/
/*.example_c.next2{
  top: 100px;
left: 300px;
position: absolute;
}

.example_c.back1{
  top: 100px;
left: 25px;
position: absolute;
}*/