/*this class is to move the text on the circle buttons down 
so the entire word would fit*/
.down {
	margin-top: 1vw;
}

/*this mysterious box below is what gives a ton of extra scrolling 
space at the bottom.*/
.z
{
	background-color: transparent;
	
	padding: 1vh;
	position: absolute;
	width: 25vw;
	height: 30vw;
	top: 100vw;
	left: 40vw;
	z-index: -1;
}

/*this is the standard menu with the lemon background */
header{
	background-image: url("Lemons.png");
  background-size: cover;
  font-size: 2.5vw;
  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;
	background-color: white;
}




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

/*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;
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;*/
}




/*These next buttons are the menu options under projects that I placed
by hand because they would not let me make them bigger when I adjusted
them to get bigger when hovered over. This took lots of time but
I got it to work. I made sure they don't have a border and there
were gifs for each theme that worked.

The 4 subsections I made these buttons for were art, words, kindness
and random.*/


.eximple_c {
color: black;

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

}

.eximple_c.art{
color: white !important;
text-transform: lowercase;
text-decoration: none;
text-shadow: none; 
letter-spacing: 0.75vw;
border-color: transparent;
background-image: url(art2.gif);
padding: 20px;
width: 14vw;
height: 14vw;
      
      border-radius: 50%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
transition: all 0.4s ease 0s;
position: absolute;
top: 30vw;
left: 20vh;
border: none;

}

.eximple_c.art:hover {
color: #ffffff !important;
text-transform: lowercase;
background-image: url(art2.gif);
transition: all 0.4s ease 0s;
font-weight:900;
width: 25vw;
     height: 25vw;
     z-index: 5;
}

.eximple_c.word{
color: white !important;
text-transform: lowercase;
text-decoration: none;
text-shadow: none; 
letter-spacing: 0.75vw;
border-color: transparent;
background-image: url(word4.gif);
padding: 20px;
width: 14vw;
height: 14vw;
      
      border-radius: 50%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
transition: all 0.4s ease 0s;
position: absolute;
top: 30vw;
left: 55vh;
}

.eximple_c.word:hover {
color: white !important;
text-transform: lowercase;
background-image: url(word4.gif);
width: 25vw;
     height: 25vw;
transition: all 0.4s ease 0s;

width: 25vw;
     height: 25vw;
     z-index: 5;

}

.eximple_c.kind{
color: white !important;
text-transform: lowercase;

text-decoration: none;
text-shadow: none; 
letter-spacing: 0.75vw;
border-color: transparent;
background-image: url(kind2.gif);
padding: 20px;
width: 14vw;
     height: 14vw;
      
      border-radius: 50%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
transition: all 0.4s ease 0s;
position: absolute;
top: 30vw;
left: 90vh;
}

.eximple_c.kind:hover {
color: white !important;
text-transform: lowercase;
background-image: url(kind2.gif);

transition: all 0.4s ease 0s;

width: 25vw;
     height: 25vw;
     z-index: 5;
}

.eximple_c.rand{
color: white !important;
text-transform: lowercase;
text-decoration: none;
text-shadow: none; 
border-color: transparent;
letter-spacing: 0.75vw;
background-image: url(rand.gif);

padding: 20px;
width: 14vw;
     height: 14vw;
      
      border-radius: 50%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
transition: all 0.4s ease 0s;
position: absolute;
top: 30vw;
left: 125vh;
}

.eximple_c.rand:hover {
color: white !important;
text-transform: lowercase;
background-image: url(rand.gif);
transition: all 0.4s ease 0s;
width: 25vw;
     height: 25vw;
     z-index: 5;
}