@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'font';
  src:
    url('font/font.woff2')
    format('woff2');
}

@font-face {
  font-weight: 400;
  font-style: normal;
  font-family: 'VT323';
  src:
    url('font/vt323.woff2')
    format('woff2');
}

* {
  border: none !important;
  outline: none !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  display: flex !important;
  overflow: hidden !important;
  user-select: none !important;
  background-color: #fff !important;
}

body.game {
  background-color: #000 !important;
}

canvas {
  position: fixed !important;
}

canvas, #interact {
  visibility: hidden !important;
}

body.game > canvas {
  visibility: visible !important;
}

#interact {
  top: 50% !important;
  left: 50% !important;
  right: -50% !important;
  bottom: -50% !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  position: fixed !important;
  text-align: center !important;
  align-items: center !important;
  font-weight: bold !important;
  flex-direction: column !important;
  font-family: VT323 !important;
  justify-content: center !important;
  font-size: max(2vw, 4vh) !important;
  transform: translate(-50%, -50%) !important;
}