body {
  background: black;
  overflow: hidden;
  user-select: none;
  width: 100vw;
  height: 100vh;

  font-family: "Alte-DIN-1451-Mittelschrift";
  color: white;
}

hiversaires,
billboards,
triggers {
  width: 100%;
  height: 100%;
  cursor: url(../../media/graphics/cursor/pointer.up.svg) 32 32, n-resize;
}

billboard {
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: left;
  background-position: center;
  /*pointer-events: none;*/
  /*image-rendering: crisp-edges;*/
  /*-webkit-optimize-contrast: crisp-edges;*/
}

billboard,
trigger {
  display: block;
  position: absolute;
}

triggers.debug > trigger {
  border: 1px lime dashed;
  color: lime;
  text-align: center;
  font-size: 8pt;
  overflow-wrap: break-word;
}

trigger#action.fuse {
  cursor: url(../../media/graphics/cursor/fuse.svg) 32 32, w-resize;
}

trigger#moveLeft {
  cursor: url(../../media/graphics/cursor/pointer.left.svg) 32 32, w-resize;
}

trigger#moveRight {
  cursor: url(../../media/graphics/cursor/pointer.right.svg) 32 32, e-resize;
}

billboard#hudStepForward,
billboard#hudStepLeft,
billboard#hudStepRight {
  background-size: 100% 100%;
}

billboards.debug > billboard {
  border: 1px blue dashed;
  color: blue;
  text-align: center;
  font-size: 8pt;
  overflow-wrap: break-word;
}

billboard.credit {
  background: black;
  display: table;
}

billboard.credit contents {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

billboard.credit h1 {
  color: #9e9e9e;
  font-size: 112.5%;
  text-transform: uppercase;
  padding-bottom: 2%;
  padding-top: 5%;
}

billboard.credit h2 {
  color: white;
  font-size: 155%;
}

@font-face {
  font-family: "Alte-DIN-1451-Mittelschrift";
  src: url("../../media/fonts/Alte-DIN-1451-Mittelschrift.ttf.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

#viewMain,
#vignette,
#modifier {
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: left;
  background-position: center;
}