#maps{
  margin-top: 100px;
  width: 100%;
  height: 840px;
  display:flex;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: default;
  z-index: -1;
}
/* map assets */
.nightmare-map{
  background-image: url(../../assets/Nightmaremaps.png);
}
.kingdoms-map{
  background-image: url(../../assets/Kingdomsmaps.png);
}
.magicforest-map{
  background-image: url(../../assets/Magicforestmaps.png);
}
#maps #map-container{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;

  background-image: 
    linear-gradient(to top, transparent 30%, var(--darkest)),
    linear-gradient(to left, transparent 65%, var(--darkest)),
    linear-gradient(to right, transparent 90%, var(--darkest));
}
@media (max-width: 450px){
  #maps #map-container{
    background-image: 
    linear-gradient(to top, transparent 30%, var(--darkest)),
    linear-gradient(to left, transparent 65%, var(--darkest)),
    linear-gradient(to right, transparent 90%, var(--darkest)),
    linear-gradient(var(--darkest), transparent 70%);
  }
}


/* header{
  width: 100%;
  height: 840px;
  display:flex;
  justify-content: center;
  margin-bottom: 40px;
  background-image: url(../../assets/HomeHeaderBackground.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: default;
}
header #title-container{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;

  background-image: 
    linear-gradient(transparent 70%, var(--darkest)),
    linear-gradient(to left, transparent 65%, var(--darkest)),
    linear-gradient(to right, transparent 90%, var(--darkest));
}
@media (max-width: 450px){
  header #title-container{
    background-image: 
    linear-gradient(transparent 70%, var(--darkest)),
    linear-gradient(to left, transparent 65%, var(--darkest)),
    linear-gradient(to right, transparent 90%, var(--darkest)),
    linear-gradient(var(--darkest), transparent 70%);
  }
} */

/* <section id="maps">
  <div id="map-container">
  </div>
</section> */