html,
body {
  margin: 0;
  overflow: hidden;
}

html {
  font-family: sans-serif;
}

#loading {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 9999999;
}

#loading img {
    height: 5em;
}

#loading span{
  color: black;
  font-weight: bold;
}

.ui {
  position: fixed;

  margin: 0.5rem;

  background-color: rgba( 255,255,255,0.6 );
  border-radius: 6px;
}

.stats {
  top: 0;
  left: 0;
  z-index: 200;
  margin: 0.5rem;
  padding: 0.5rem 0.5rem 0;
}

.stats-item {
  margin: 0 0 0.5rem;

}

.stats-item-title {
  margin: 0 0 0.25rem;

  font-size: 0.75rem;
}

#stats div {
  position: relative !important;
}

.marker {
  right: 0;
  bottom: 0;
  z-index: 200;
  margin: 0.5rem;
  padding: 0.25rem 0.5rem;

  font-size: 0.75rem;
  color: inherit;
  text-decoration: none;
}

#app {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

#video {
  position: absolute;
  top: 0;
  left: 0;

  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

#canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;

  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

#arvideo {
  display: none;
}

/* --------- For Map AR --------- */


#map-ar-content-cropper{
  position: fixed;
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 10000;
  overflow: hidden;
}

#map-ar-content-cropper #map-ar-content{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / 9 * 16);      /*原圖比例皆為16/9，為放大時別被寬度限制住，container也要跟著放大*/
  height: 100%;
}

#map-ar-content .nft-stuff-png-scalar{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;

  display: block;
}

#map-ar-content .nft-stuff-png-scalar .nft-stuff-png {
  /*Write by program*/
  --horizontalCurrentFrame: 0;
  --verticalCurrentFrame: 0;
  /*For program*/
  --horizontalFrames: 8;
  --verticalFrames: 5;
  /*Automaton*/
  --horizontalPercent: calc(var(--horizontalCurrentFrame) / (var(--horizontalFrames) - 1));
  --verticalPercent: calc(var(--verticalCurrentFrame) / (var(--verticalFrames) - 1));

  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background-image: unset;    /*For program (Contain image url)*/
  background-repeat: no-repeat;
  background-position: left calc(var(--horizontalPercent) * 100%) top calc(var(--verticalPercent) * 100%);
  background-size: calc(100% * var(--horizontalFrames)) calc(100% * var(--verticalFrames));

  /*animation*/
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
}

#map-ar-content .nft-stuff-png-scalar .reveal{
  /*animation*/
  opacity: 1;
}