html,
body {
  height: 4000px;
  background: #04111f;
  background: -moz-linear-gradient(top, #000000 10%, #04111f 50%);
  background: -webkit-linear-gradient(top, #000000 10%, #04111f 50%);
  background: linear-gradient(to bottom, #000000 10%, #04111f 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#04111f',GradientType=0 );

  color: #fff;
  margin: 0px;
  padding: 0px;
}

#recipe-div {
  height: 100%;
  /* background: whitesmoke; */
  margin-left: 2%;
  margin-top: 2%;
  /* margin-right: 10%; */
  margin-bottom: 4%;
}
#recipe-div p {
  color: white;
  padding-bottom: 2%;
}

a {
  color: #ff3796;
}
svg {
  /* border: 1px solid red; */
  -webkit-filter: drop-shadow(0 0 0.95rem white);
  filter: drop-shadow(0 0 0.95rem white);
}
.pic {
  border-radius: 180px;
  -webkit-filter: drop-shadow(0 0 0.95rem white);
  filter: drop-shadow(0 0 0.95rem white);
}
.btn {
  background-color: #57bb86;
}
#footer {
  /* position: absolute; */
  -webkit-filter: drop-shadow(0 0 0.95rem white);
  filter: drop-shadow(0 0 0.95rem white);
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  /* height of footer  */
  height: 260px;
  overflow: hidden;
}

#mapwrap {
  width: 100%;
  height: 160px;
}

#map {
  position: absolute;
  width: 100%;
  height: 88%;
  margin-top: 8%;
}
/* 
#mapmask {
  position: absolute;
  width: 100%;
  height: 75px;
  background: transparent url("../images/atmosphere.png") 50% 0px no-repeat;
  background-size: 100% auto;
  z-index: 1;
} */

@media (max-width: 800px) {
  #mapwrap,
  #mapmask,
  /* svg, */
  #footer {
    height: 110px;
  }
}

@media (max-height: 600px) and (min-width: 400px) {
  #mapwrap,
  #mapmask,
  /* svg, */
  #footer {
    height: 130px;
  }
}