/* For mobile phones: */
@font-face {
  font-family: "Outward Block";
  src: url(font/outward-block.ttf);
}


@media only screen and (min-width: 768px) {
  /* For desktop: */
*,html,body{
  margin: none;
  position: none;
}

  .title{
    position: absolute;
    z-index: 100000000;
    font-family: "Outward Block";
    color: white;
    left: 10vw;
    top: 15vh;
    font-size: 4vw;
    mix-blend-mode: difference;

  }
.title h1{
  font-weight: normal;
  margin: 0.1vh;
}
  .map{
  width: 100vw;
  height: 200vh;
  margin: 0;
  }


}

@media print {
  /* For print */
  @page{
    size: A3;
    size: portrait;
    bleed: 7pt;
    margin: 2cm;
  }
  * { margin: 0 !important;
      padding: 0 !important; }
  #controls, .footer, .footerarea{
     display: none;
     background: darkgrey;
    }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%;
    overflow: hidden;
    font-size: 9.5pt;
  }
  .title{
    position: absolute;
    z-index: 100000000;
    font-family: "Outward Block";
    color: white;
    left: 15vw;
    top: 10vh;
    font-size: 10vw;
    mix-blend-mode: difference;

  }
.title h1{
  font-weight: normal;
  margin: 0.1vh;
}
 
    .map{
      left: 0;
      top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    }
}