body, html, #app {
  margin: 0;
  width: 100%;
  height: 100%;
 }

 @font-face {
  font-family: 'Harabara', 'Segoe UI', Tahoma, 'Geneva', Verdana, sans-serif;
    src: url('Harabara.ttf') format('truetype');
}

#app {
  /*margin-top: 25px;*/
  overflow: hidden;
  touch-action: pan-up;
  color: #ffffff;
  /*font-family: 'Harabara', Helvetica, sans-serif;*/
  font-family: 'Harabara', 'Segoe UI', Tahoma, 'Geneva', Verdana, sans-serif;
    src: url('Harabara.ttf') format('truetype');;
  text-align: center;
    text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}


#app h1 {
  --fontSize: 60px;
  --lineHeight: 80px;
  width: auto;
  height: calc(2 * var(--lineHeight));
  line-height: var(--lineHeight);
  margin: calc(50vh - var(--lineHeight)) auto 0;
  font-size: var(--fontSize);
  text-transform: capitalize;
}

#app a {
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

#app canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
}