@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Gamja+Flower');
h1 {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .1em;
}
h2 {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .1em;
}
p {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .1em;
}
h3 {
  font-family: 'Gamja Flower', sans-serif;
  letter-spacing: .1em;
}
#upfront {
  border-style:solid;
  border-color:black;
  margin-left:22%;
  margin-right:22%;
 margin-bottom:1em;
}
#mainishbox {
  border-style:solid;
  border-color:black;
  margin-left:30%;
  margin-right:30%;
  text-align:center;
  padding-left:2px;
  padding-right:2px;
  font-size:.8em;
  transition: filter 15s;
}
#mainishbox:hover {
  background-color:red;
  filter: invert(100%);
  
}

#mainbox {
  border-style:solid;
  border-color:#7a0505;
   margin-left:25%;
  margin-right:25%;
  padding-left:2px;
  font-size:0.8em;
  border-width:5px;
  margin-top:2em;
}
#fruits {
  transition: transform 1s;
}
#fruits:hover {
  transform: rotate(300deg);
}
#nopicture {

  transition: transform 3s;
}
#nopicture:hover {
  transform: rotate(90deg);
}
#explanation {
   border-style:solid;
  border-color:#139c60;
   margin-left:30%;
  margin-right:30%;
  padding-left:2px;
  font-size:.9em;
  border-width:5px;
  margin-top:2em;
  text-align:center;
}
#vegebox {
  border-style:solid;
  border-color:#29a10e;
  margin-left:25%;
  margin-right:25%;
  padding-left:2px;
  font-size:0.8em;
  border-width:5px;
  margin-top:2em;
}