@font-face {
  font-family: "Uni";
  src: url("fonts/uni-sans-heavy-italic/Uni-Sans-HeavyItalic.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "UniRegular";
  src: url("fonts/uni-sans-regular-italic/Uni-Sans-RegularItalic.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Generated with https://gwfh.mranftl.com/fonts */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/teko/teko-v15-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
      url("fonts/teko/teko-v15-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* From https://css-tricks.com/a-couple-of-use-cases-for-calc/ */
/* So 100% means 100% */
* {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
}

body {
  font-family: "UniRegular", sans-serif;
}

body.mobile {
  background-color: black;
}

/* body.mobile { */
/* Prevent scrolling on scaled HTML layer */
/* overflow: hidden; */
/* } */

#game-container {
  display: flex;
  justify-content: center;
  margin-top: calc(env(safe-area-inset-top));
  /* margin-top: 100px; */
}

#layer-parent {
  position: relative;

  max-width: 1080px;
  width: 100%;

  max-height: 1920px;
  /* height: calc(100vh - 100px); */
  height: calc(100vh - env(safe-area-inset-top));
}

h1,
h2,
h3,
h4 {
  font-family: "Uni", sans-serif;
  margin-bottom: 10px;
}

p {
  margin-bottom: 10px;
}

/* #game-parent canvas {
  position: absolute;
} */

/* #game-parent {
  position: relative;

  height: calc((16 / 9) * 100vw);
  max-height: calc(100vh - 50px);
 */
/* This background color can be overridden by the image */
/* background-color: #1d1d32; */

/* background-image: url(images/level/background.png);
  background-size: cover; */

/* user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
} */

/* #game-parent:fullscreen {
  max-height: unset;
}

#game-parent:-webkit-full-screen {
  max-height: unset;
}

#game-parent:-moz-full-screen {
  max-height: unset;
}

#game-parent:-ms-fullscreen {
  max-height: unset;
}

#game-parent canvas {
  position: absolute;

  height: calc((16 / 9) * 100vw);
  max-height: calc(100vh - 50px); */

/* Center the element
     Based on https://css-tricks.com/centering-percentage-widthheight-elements/ */
/* left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  background-color: black;
} */

/* #game-parent:fullscreen {
  max-height: unset;
}

#game-parent:-webkit-full-screen {
  max-height: unset;
}

#game-parent:-moz-full-screen {
  max-height: unset;
}

#game-parent:-ms-fullscreen {
  max-height: unset;
}

#game-parent:fullscreen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-webkit-full-screen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-moz-full-screen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#game-parent:-ms-fullscreen canvas {
  max-height: 100vh;

  top: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
} */

/* #html-layer {
  position: relative;

  width: 1080px;
  height: 1920px;

  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
} */

#html-layer {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

#html-layer > * {
  pointer-events: auto;
}

#descriptive-content {
  margin: 10px;
  font-family: UniRegular;
}

.build-info {
  font-size: x-small;
}

video {
  position: absolute;
  height: 100%;
  aspect-ratio: initial;
  left: 50%;
  transform: translateX(-50%);
}

video::-webkit-media-controls-panel {
  display: none;
}

/* video::-webkit-media-text-track-display {
  font-size: 1em !important;
} */

#video-container {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/* fullscreen */

html:-ms-fullscreen {
  width: 100%;
}

:-webkit-full-screen {
  background-color: transparent;
}

/* hide controls on fullscreen with WebKit */
video::-webkit-media-controls {
  display: none !important;
}

figure {
  margin: 0;
}

figure[data-fullscreen="true"] {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

figure[data-fullscreen="true"] video {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

figure[data-fullscreen="true"] figcaption {
  display: none;
}

figure[data-fullscreen="true"] .controls {
  position: absolute;
  z-index: 2147483647;
}

.video-controls-button {
  cursor: pointer;
  border: none;
}

#play-button {
  transform: translate(-50%, -50%);
  left: 50vw;
  top: 50vh;
  position: fixed;
  z-index: 1;
}

#debug {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 30%);
  border-bottom-right-radius: 5px;
  font-family: Monospaced, sans-serif;
  padding: 0 10px;
  color: #fff;
  font-size: 10px;
  pointer-events: none;
}

.debugList,
.debugList li {
  list-style: none;
  margin: 0 5px;
  padding: 0;
  border: none;
}

.debugList.col {
  display: flex;
}

.form {
  width: 100%;
  height: 100%;
  background-color: #092d3d;

  color: white;
  text-align: center;
}

.form h1 {
  font-size: 50px;
  color: #f7c55e;

  margin-bottom: 30px;

  /* padding-top: 200px;
  padding-left: 50px;
  padding-right: 50px; */
}

.form h2 {
  font-size: 35px;
  color: #f7c55e;

  /* margin-bottom: 20px;

  padding-left: 50px;
  padding-right: 50px; */
}

.form p {
  font-size: 1em;

  padding-left: 1em;
  padding-right: 1em;
}

.form .post-message {
  margin-top: 1em;
}

.form textarea {
  resize: none;

  font-size: 1em;
  width: 90%;

  /* margin-top: 20px; */
  margin-left: auto;
  margin-right: auto;

  /* height: 400px; */
}

.form input {
  resize: none;

  font-size: 1.5em;
  text-align: center;

  /* margin-top: 20px; */
  margin-left: auto;
  margin-right: auto;
}

.form button {
  display: block;

  height: 2em;
  width: 80%;
  font-size: 1em;

  margin: 0.2em;

  border: 0.1em solid #f7c55e;
  border-radius: 10px;

  font-family: "Uni";

  color: #f7c55e;
  background-color: #092d3d;

  margin-left: auto;
  margin-right: auto;
  /* margin-top: 50px; */
}

.form button#send {
  color: #092d3d;
  background-color: #f7c55e;
}

.form button:disabled {
  opacity: 50%;
}