@import url("fonts/style.css");

*,
html,
body {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "DT Mono";
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

#controls-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  z-index: 100;
  pointer-events: none;
}

#main-game-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

#cubetale {
  background-color: black;
  image-rendering: auto;
  cursor: none !important;
  z-index: 100;
  /* filter: sepia(0.1); */
  border: none;
  /* transform: perspective(500px) rotateX(20deg) scale(1.2); */
  /* transform: scale(1) perspective(50vw) rotateX(1deg); */
  /* transform: matrix3d(0.9, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, -0.001, 0, 0, 0, 1); */
  /* filter: contrast(1.2) brightness(0.8) saturate(1.5) hue-rotate(-10deg); */
  /* filter: contrast(1.05) brightness(0.95) saturate(1.1) hue-rotate(-3deg); */
}

.o-btn {
  border: none;
  background-color: grey;
  color: black;
  font-family: "DT Mono";
  font-weight: bold;
  font-size: 30px;
  aspect-ratio: 1;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  opacity: 0.5;
  border: solid 3px white;
  position: fixed;
  cursor: pointer;
  pointer-events: auto;
}

/* .o-btn.active,
.o-btn:active {
  background-color: white;
  border-color: grey;
} */
/* .o-btn:hover {
  border-color: black;
} */

#onscreen-s {
  bottom: 20px;
  left: 60px;
}
#onscreen-a {
  bottom: 60px;
  left: 20px;
}
#onscreen-d {
  bottom: 60px;
  left: 100px;
}
#onscreen-w {
  bottom: 100px;
  left: 60px;
}
#onscreen-wd {
  bottom: 100px;
  left: 100px;
}
#onscreen-wa {
  bottom: 100px;
  left: 20px;
}
#onscreen-sa {
  bottom: 20px;
  left: 20px;
}
#onscreen-sd {
  bottom: 20px;
  left: 100px;
}
#onscreen-c {
  bottom: 100px;
  right: 20px;
}
#onscreen-x {
  bottom: 60px;
  right: 60px;
}
#onscreen-z {
  bottom: 20px;
  right: 100px;
}
#onscreen-p {
  top: 20px;
  right: 20px;
}
#onscreen-r {
  top: 20px;
  left: 20px;
  width: 60px;
}
#onscreen-f11 {
  top: 20px;
  right: 70px;
  width: 60px;
}

.aa {
  color: rgb(44, 14, 44);
}

#main-game {
  border: none;
  width: 100vw;
  height: 100vh;
  image-rendering: auto;
  cursor: none !important;
  background-color: black;
}