#bbfromtop {
height:30px;
width:40px;
}

/* body {
  /* overflow: hidden; 
} */

.button {
  top:80%;
  left:80%;
  opacity: 0;
}

#img_blender {
  width: 100%;
  height:100%;
}

#blend {
  position: absolute;
  width: 800px;
  height: auto;
  top: 20%;
  left: 20%;
}
.moon-history {
  background-image:url("../png/FullMoon2010.png");
  background-size:cover;
  opacity: 60;
	width: 100%;
  height: 100%;
}

.ingr_blend {
  position: absolute;
  top: 35%;
  left:35%;
  width: 200px;
  height: auto;
  opacity: 0;
}

#nav_poi{
  width: 75px;
}

#nav_sel{
  width: 55px;
}

#ble_hum {
  top: 32%;
  left:29%;
  width: 450px;
  height: auto;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: "Roboto-Regular", sans-serif;
  background: linear-gradient(-45deg, #b1b8b7, grey, black, #c9cccb);
  background-size: 400% ;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
blackquote:before, blackquote:after,
q:before, q:after {
  content:"";
  content: none;
}

#fleche {


  position: absolute;
  bottom: 5px;
  left: 14vw;
  height: 52vh;

  opacity: 90%;
  width: 8vw;

}
.moon-history {
  background-image:url("../png/FullMoon2010.png");
  background: size 50;
	width: 100%;
  height: 100%;
  opacity: 60%;
}