/*I was initially going to make a media query thing here but I was not sure what to do with it*/

body{
	background-image: url("Lemons1.png");
/*the background is an asset I made to fit the lemons theme*/
  color: transparent;
  font-size: 11vw;
  /*these two lines set "hi" in the html so that I can push the icons
  to the bottom of the page, I wasn't sure how else to get them 
  to the bottom but not completely like align-items might */
  background-size: cover;
 /* I wanted the background to cover the entire space*/
  

}


.buttons
{
/*  this class is to group all the icons in flex boxes so they all line up in a row*/
  position: relative;
  top: 0.5vw;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
  align-items: center;
	margin: 5vh;

}

/*this part is to make the cross fading of each text icon with 
the actual picture icon when the mouse hovers over it
the link I used as a source for this is
http://css3.bradshawenterprises.com/cfimg/*/

/*these three stanzas of code are to set the top icon's opacity to
0, which will make the icon on the bottom visible and I made them
transition with ease in but not out so that they feel more lively
*/

/*the 4 sections I did this for are about, project, bucket list and 
a lil love*/
#about {

  position:relative;
  height:50px;
  width:46px;
  margin:0 auto;
}

#about img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  transition: all 0.5s ease 0s;
}

#about img.top:hover {
  opacity:0;
}
#proj {
  position:relative;
  height:50px;
  width:46px;
  margin:0 auto;
}

#proj img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: all 0.5s ease 0s;
}

#proj img.top:hover {
  opacity:0;
}
#bucket {
  position:relative;
  height:50px;
  width:4px;
  margin:0 auto;
}

#bucket img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: all 0.5s ease 0s;
}

#bucket img.top:hover {
  opacity:0;
}

#love {
  position:relative;
  height:50px;
  width:48px;
  margin:0 auto;
}

#love img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: all 0.5s ease 0s;
}

#love img.top:hover {
  opacity:0;
}