#container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #root {
    width: 100%;
    height:100%;
    max-height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
}

@font-face {
  font-family: "JMH Arkham Regular";
  src: url("../fonts/jhm-arkham.ttf");
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriad-pro-regular.ttf");
}

@font-face {
  font-family: "Avant Garde";
  src: url("../fonts/avant-garde-ctt.ttf");
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.ttf");
}

body {
  margin: unset !important;
  background-position: center;
  background-size: cover;
  height: 100%;
}

.gameFrame {
  width: 100%;
  height: 100%;
  border: none;
}

#dev-console {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: .75;
  position: fixed;
  top: 0;
  z-index: 100;
  color: #fff;
  display: none;
}

#dev-console-upper {
  height: 95vh;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
}

#dev-console-upper p {
  padding: 2px;
  margin: 2px;
}

#dev-console-input-div {
  height: 5vh;
}

#dev-console-input-div label {
  padding: 6px;
  box-sizing: border-box;
  font-size: 18px;
  display: block;
  position: absolute;
  pointer-events: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
  supported by Chrome, Edge, Opera and Firefox */
}

#dev-console-input {
  background-color: #000;
  border: 1px solid #999;
  font-size: 18px;
  height: 70%;
  width: 100%;
  padding: 6px 6px 6px 18px;
  box-sizing: border-box;
  color: inherit;
  display: block;
}

html {
  height: 100%;
}