html, body {
  touch-action: none; /* disables double-/triple-tap zoom on iOS */
  background-color: #081820;
  color: #e0f8d0;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow: hidden;
  position: absolute;
}

/* replace textarea font with fixed-width
@font-face {
  font-family: 'perfectvga';
  src: url('perfectvga.woff2') format('woff2'),
       url('perfectvga.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

textarea, input.canvas_render {
  font-family: perfectvga,"Lucida Console",Courier,monospace;
}
input.canvas_render {
  /* Nudge up a bit, as it doesn't quite line up with parent element for unknown reasons */
  position: relative;
  top: -15%;
}
*/


a {
  color: #DDF;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* Work around Safari leaving stuck tap highlights */
}
a:visited {
  color: #DBF;
}
#nowebgl {
  /* CANNOT have padding - messes up Safari when hidden! padding: 20px; */
  pointer-events: all;
}

#loading {
  background: #081820;
}

#content {
  display: block; /* remove scrollbars */
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
}

#safearea {
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  left: var(--discord-safe-area-inset-left, env(safe-area-inset-left));
  right: var(--discord-safe-area-inset-right, env(safe-area-inset-right));
  top: var(--discord-safe-area-inset-top, env(safe-area-inset-top));
  bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom));
  position: absolute;
  pointer-events: none;
}

canvas {
  display: block; /* remove scrollbars */
  width: 100%;
  height: 100%;
  outline: none;
}

#debug_overlay {
  left: 1%;
  top: 11%;
  position: fixed;
  white-space: pre-wrap;
  z-index: 99;
  background-color: rgba(1, 1, 1, 0.8);
}

.screenwrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hflex {
  display: flex;
  flex-direction: row;
}

.vflex {
  display: flex;
  flex-direction: column;
}

.fluid {
  flex: 1;
}

.flexcenter {
  align-self: center;
}

#dynamic_text {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block; /* remove scrollbars */
}

.glovui_dynamic {
  font-size: 1em;
  position: absolute;
  opacity: 1.0;
  pointer-events: auto;
}
.glovui_dynamic input,.glovui_dynamic textarea {
  font-size: 1em;
  line-height: 1em; /* fixes Firefox extra-tall lines in textareas */
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: white;
  border-width: 1px;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

span:focus-visible {
  outline: none;
}

.glovui_dynamic .fixed {
  resize: none;
  overflow: hidden;
  text-wrap: nowrap;

  /* potentially useful for better blending if canvas_render is not an option:
    background: rgba(1,1,1,0);
    border: none;
    outline: none;
    color: #111;
    caret-color:  #111;
  */
}
.glovui_dynamic .canvas_render {
  resize: none;
  background: rgba(1,1,1,0);
  border: none;
  outline: none;
  overflow: hidden;
  text-wrap: nowrap;

  color: rgba(0,0,0,0);
  caret-color: rgba(0,0,0,0);
  /* debug alignment: color: rgba(255,0,255,0.5); */
  /* debug alignment: caret-color: rgba(255,0,255,0.5); */
}
.glovui_dynamic .canvas_render::selection {
  color: rgba(0,0,0,0);
}

.glovui_link {
  display: block;
  height: 100%;
  user-drag: none;
}