/*this is the img pos of the "calling a loved one"*/
.call {
	position: absolute;
	top: 85vw;
	left: 65vw;

}

/*this is the text of the "calling a loved one"*/
.callText
{
	background-color: transparent;

	text-shadow: 2px 2px #F4F40F;
	color: black;
	font-size: 1.5vw;
	padding: 3vh;
	position: absolute;
	width: 30vw;
	height: 10vh;
	top: 85vw;
	left: 67vw;
	font-family: 'Chango', cursive;
}
/*this is the decorative rectangle of the "calling a loved one"*/
.decor.p
{
	background-color: black;
	
	padding: 1vh;
	position: absolute;
	width: 25vw;
	height: 30vw;
	top: 77vw;
	left: 55vw;
	z-index: -1;
}

/*this is the rectangle padding at the bottom of the page*/
.decor.z
{
	background-color: transparent;
	
	padding: 1vh;
	position: absolute;
	width: 25vw;
	height: 30vw;
	top: 125vw;
	left: 40vw;
	z-index: -1;
}


/*this is the img pos of the "reading empowering books"*/
.book {
	position: absolute;
	top: 40vw;
	left: 15vw;

}

/*this is the text of the "reading empowering books"*/
.bookText
{
	background-color: transparent;

	text-shadow: 2px 2px #F4F40F;
	color: ;
	font-size: 2vw;
	padding: 3vh;
	position: absolute;
	width: 25vw;
	height: 10vh;
	top: 57vw;
	left: 27vw;
	font-family: 'Chango', cursive;
}

/*this is the decorative rectangle of the "reading empowering books"*/
.decor
{
	background-color: black;
	
	padding: 1vh;
	position: absolute;
	width: 20vw;
	height: 25vw;
	top: 35vw;
	left: 10vw;
	z-index: -1;
}

/*this is the img pos of the "writing 
yourself a love letter"*/
.letter
{
	position: absolute;
	top: 100vw;
	left: 13vw;
}

/*this is the text of the "writing 
yourself a love letter"*/
.letterText
{
	background-color: transparent;

	text-shadow: 2px 2px #F4F40F;
	color: black;
	font-size: 1.5vw;
	padding: 3vh;
	position: absolute;
	width: 20vw;
	height: 10vh;
	top: 95vw;
	left: 28vw;
	font-family: 'Chango', cursive;
}

/*this is the decorative rectangle of the "writing 
yourself a love letter"*/
.decor.c
{
	background-color: black;
	
	padding: 1vh;
	position: absolute;
	width: 20vw;
	height: 20vw;
	top: 110vw;
	left: 18vw;
	z-index: -1;
}






.submenu{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    grid-gap: 0.1vw;
    font-style: italic;
	color: #0DD3CD;
	font-size: 1.5vw;
}

/*this is to make sure that the link doesn't have a hyperlink color*/
a{
	color: inherit;
	text-decoration: none;
}

/*these are the general settings for the submenu items */
.obj{
    background-color: transparent;
    color: #F4F40F;
    text-shadow: 2px 2px black;
    padding: 10px;
    font-family: 'Playfair Display', serif;
}
.obj4{
    display: flex;
    justify-content: center;
   grid-column-start: 7;
   grid-column-end: 7;
}


.obj3{
    display: flex;
    justify-content: center;
   grid-column-start: 6;
   grid-column-end: 6;

}

.obj2{
    display: flex;
    justify-content: center;
    grid-column-start: 5;
   grid-column-end: 5;
   color:black;
    text-shadow: 2px 2px #F4F40F;

}

.obj1{
    display: flex;
    justify-content: center;
    
    
grid-column-start: 4;
   grid-column-end: 4;
}

/*these are the settings for each individual menu item when
hovered over, changing its colors and responding to the user*/
.obj4:hover{
   color: black;
   text-shadow: 2px 2px #F4F40F;
   grid-column-start: 7;
   grid-column-end: 7;
}


.obj3:hover{
    color: black;
   text-shadow: 2px 2px #F4F40F;
   grid-column-start: 6;
   grid-column-end: 6;
}

.obj2:hover{
   color: #F4F40F;
   text-shadow: 2px 2px black;
   grid-column-start: 5;
   grid-column-end: 5;
    
}

.obj1:hover{
    
    color: black;
   text-shadow: 2px 2px #F4F40F;
   grid-column-start: 4;
   grid-column-end: 4;
}




header{
	/*background-image: url("Lemons.png");*/

  /*background-repeat: no-repeat;
  background-attachment: fixed;*/
  /*background-size: cover;*/
  font-size: 2.5vw;
  background-color: white;
  color: transparent;

  
}
body{
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1vw;
	background-image: url("backgdWord.png");
	background-attachment: fixed;
}
/*I made the asset for the background of this page*/

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


}

/*this is the logo in the upper left corner*/
.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;

/*box-shadow: 25px 25px #FE6F8C;
*/font-size:1.5vw;


}


.example_c.about:hover{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background: black;
border: 4px 4px solid white;
text-shadow: none;
position: absolute;
left: 30vw;
top: 7vw;

}
.example_c.about{
  /*top: 650px;
left: 1450px;
position: absolute;*/

text-shadow: none;

position: absolute;
left: 30vw;
top: 7vw;
}
.example_c.proj:hover{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
border: 4px 4px solid black;
background-color: black;
text-shadow: none;
position: absolute;
left: 40vw;
top: 7vw;
}
.example_c.proj{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background-color: black;
text-shadow: none;
position: absolute;
left: 40vw;
top: 7vw;
}
.example_c.bucket{
  /*top: 650px;
left: 1450px;
position: absolute;*/

text-shadow: none;
position: absolute;
left: 51vw;
top: 7vw;
}
.example_c.love{
  /*top: 650px;
left: 1450px;
position: absolute;*/

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;

/*box-shadow: 25px 25px #ffffff;*/
/*text-shadow: 2px 2px #F4F40F;*/
}