html {
  -webkit-text-size-adjust: none;
  touch-action: manipulation;
  background-color: black;
}

body {
  touch-action: none;
}

#swap-cam-btn {
  position: absolute;
  pointer-events: auto;
  top: 1vh;
  right: 1vh;
  width: 3em;
  height: 3em;
}

#turnLeftBtn,
#turnRightBtn,
#arFaceBtn,
#arNormalBtn {
  position: absolute;
  pointer-events: auto;
  top: 1vh;
  width: 4em;
  height: 4em;
}


#pauseBtn {
  position: absolute;
  pointer-events: auto;
  bottom: 2vh;
  left: 4vw;
  width: 7vw;
}

#muteBtn, #soundBtn {
  position: absolute;
  pointer-events: auto;
  bottom: 2vh;
  right: 1vh;
  width: 3em;
  height: 3em;
}

#playBtn {
  position: absolute;
  pointer-events: auto;
  bottom: 2vh;
  left: 4vw;
  width: 7vw;
}

#flipBg {
  pointer-events: none;
  background-color: black;
  z-index: 20;
  opacity: 0;
}

.absolute-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.recorder-container {
  z-index: 19;
}

/* Style for "Tap To Place Hologram" text overlay */
#over {
  z-index: 10;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  text-align: center;
  color: white;
  font-family: 'Nunito', monospace;
  text-shadow: 0px 0px 5px black;
}



#gradient-box {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  z-index: -1;
  width: 100vw;
  height: 20vh;
  position: absolute;
  bottom: 0;
}

/* animations */
.fade-out {
  animation: fade-out 0.5s linear forwards;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.pulse-once {
  animation: pulse-once 0.2s cubic-bezier(0.785, 0.135, 0.150, 0.860) both;
}

@keyframes pulse-once {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}




#overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;

  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: flex-start;

  pointer-events: none;
  user-select: none;
}

#overlay .bottom-bar {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  flex-wrap: wrap;
}


/*button {*/
/*  appearance: none;*/
/*  background: rgba(153, 135, 135, 0.267);*/
/*  color: white;*/
/*  border: 4px solid;*/
/*  padding: 0.5em;*/
/*  font-size: 1.2em;*/
/*  border-radius: 2em;*/
/*  user-select: none;*/
/*  pointer-events: auto;*/
/*  align-self: center;*/
/*}*/

/*h1 {*/
/*  font-size: 1.5em;*/
/*  background: rgba(153, 135, 135, 0.267);*/
/*  color: white;*/
/*}*/

.overlay-content {
  flex-grow: 1;
}

p {
  font-size: 1.5em;
  background: rgba(153, 135, 135, 0.267);
  color: white;
}

p {
  font-size: 1.5em;
  background: rgba(153, 135, 135, 0.267);
  color: white;
}

body.inline #inline-instructions {
  /* display: contents; */
  display: none;
}

body #ar-instructions,
body.ar-preparing #ar-instructions {
  display: contents;
}

#overlay {
  display: none;
}

#overlay.on {
  display: flex;
}

#soundBtn {
  display: none;
}


/*#promptText {*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  transform: translate(-50%, 20vh);*/
/*  background-color: yellow;*/
/*  font-size: 2em;*/
/*}*/