/*this is the css for the back button*/
.back
{
color: #0DD3CD;
  
  font-size: 1.5vw;
  text-shadow: 2px 2px black;
  
  font-family: 'Chango', cursive;
  

}

/*this is the size setting for the tokyo tower img*/
.tower
{
  width: 30vw;
  height: auto;
}

/*this is the size setting for the shibuya crossing img*/
.shibuya
{
  width: 40vw;
  height: auto;
}
/*
this is the size setting for the sensoji temple */
.temple
{
  width: 40vw;
  height: auto;
}

/*this is the size setting for the digital art museum img*/
.museum
{
  width: 40vw;
  height: auto;
}

/*this is the size setting for the black sesame ice cream img*/
.sesame
{
  width: 30vw;
  height: auto;
}

/*this is the size setting for the kinaku-ji
*/
.kinkaku
{
  width: 40vw;
  height: auto;
}

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

/*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: 150vw;
	left: 40vw;
	z-index: -1;
}

/*these are the settings for the paragraphs*/
p{
  background-color: #0DD3CD;
  color: white;
  padding: 1vw;
  width: 30vw;
  line-height: 1.5;
}

/*these are the settings for the sub headings*/
h2
{
color: #0DD3CD;
  font-size: 2vw;
  font-family: 'Chango', cursive;
  text-shadow: 4px 4px black;
  text-align: center;
}

/*this is the flex that held the 5 boxes together*/
.flex1{
    
    display: flex;
    flex-direction: column;
    align-items:center;
   /* font-style: italic;
	color: #0DD3CD;*/
	font-size: 1.5vw;
	position: relative;
	top: 20vw;

}

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

/*this is the formatting for each of the 5 things to do 
in tokyo*/
.item{
  display: flex;
    flex-direction: column;
    align-items:center;
    background-color: white;
    color: black;
    text-shadow: none;
   /* border: 4px solid black;*/
    padding: 2vw;
    font-family: 'Playfair Display', serif;
    z-index: 1;
   margin:2vw;

   width: 40vw;

    /*position: absolute;
    width: 10vw;
    height: 10vw;*/
}


header{
  font-size: 2.5vw;
  background-color: white;
  color: transparent; 
}


body{
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1vw;
	background-image: url("watercolor.jpg");
	background-size: cover;
	background-attachment: fixed;
}




#title
{
	letter-spacing: 2vw;
	color: #0DD3CD;
	font-size: 4vw;
	font-family: 'Chango', cursive;
	text-shadow: 4px 4px black;
  text-align: center;
	position: absolute;
	top: 18vw;
	left: 3vw;
	display: flex;
	/*flex-wrap: nowrap;*/
}
 
.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;*/

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

text-shadow: none;
position: absolute;
left: 40vw;
top: 7vw;
}
.example_c.bucket{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background-color: black;
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.bucket:hover{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background-color: black;
text-shadow: none;
position: absolute;
left: 51vw;
top: 7vw;
color: white;
border: 4px 4px solid black;
background-color: black;
}

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