/* app */
body {
  background-color: #fff;
  color: #636b6f;
  font-family: "Nunito", sans-serif;
  font-weight: 200;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

/* app.showVideo
 *
 * This is the container for the video element and canvas element.
 * The video element is hidden, and the canvas element is used to
 * display the video stream.
 *
 * Container is centered in the viewport using flexbox.
 */
#show-video-el {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}
#show-video-video-el {
  display: none;
}

/* app.debugInfo */
#debug-info-el {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  font-size: 0.8em;
  font-weight: bold;
  overflow: scroll;
  z-index: 100;
  pointer-events: none;
  color: black;
}

/* app.arClock
 *
 * This is the container for the AR clock whose hands move with player's hands
 */
.question {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  /* box-shadow: 0 0 2em #aaa; */
  /* background: url(img/clock.svg); */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
  /* background-position: center; */
  /* mask: radial-gradient(circle at 50% 50%, #fff, rgba(0, 0, 0, 0.5) 100%); */
  margin-top: 20%;
}
/* .clock::before, */
/* .clock::after { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 50%; */
/*   left: 50%; */
/*   transform: translate(-50%, -50%); */
/*   border-radius: 50%; */
/* } */
/* .clock::before { */
/*   z-index: 1; */
/*   width: 128px; */
/*   height: 128px; */
/* } */
/* .clock::after { */
/*   z-index: 3; */
/*   width: 4.5%; */
/*   height: 4.5%; */
/*   background: #673ab7; */
/* } */
.question .option {
  z-index: 2;
  position: absolute;
  top: 10%;
  transform-origin: center;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  transform: scale(0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2em;
  font-weight: bold;
  color: white;
  text-align: center;
}
.question .option.A {
  left: 0;
  background: #6161ff77;
}
.question .option.B {
  right: 0;
  background: #ff696177;
}

/* app.levels
 *
 * This is the container for the levels and game logic
 * Also contains the win animation
 */
#levels-el {
  height: 100vh;
}
.levels-header-msg {
  position: absolute;
  top: 10%;
  height: 5%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #673ab7;
  /* text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); */
}
.levels-challenge-question {
  position: absolute;
  top: 15%;
  height: 10%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: white;
  text-shadow: 3px 4px 6px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.levels-result-msg {
  position: absolute;
  top: 40%;
  height: 15%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: white;
  text-shadow:
    0 0 black,
    8px 8px #673ab7,
    0 0 black,
    0 0 black;
  z-index: 10;
}

#selector-buttons {
  position: absolute;
  bottom: 40px;
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 0 20px;
  flex-direction: column;
  text-align: center;
}

#selector-buttons select {
  height: 30px;
  background: rgba(255, 255, 255, 0.4);
  outline: none;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  min-width: 150px;
  font-size: 22px;
}

/* animations
 *
 * pop in and out
 * fade in and out
 */
.anim.pop-in {
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim.pop-out {
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.anim.scale-in {
  transform: scale(1);
  transition: transform 0.25s ease-out;
}
.anim.scale-out {
  transform: scale(0);
  transition: transform 0.2s ease-out;
}
.anim.fade-in {
  opacity: 1;
  transition: opacity 0.25s ease-out;
}
.anim.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.center-max-size {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 90vh;
  height: 90vh;
  max-height: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}