/* @font-face {
  font-family: blackbt;
  src: url('./assets/blackbt.ttf');
} */

@font-face {
  font-family: blackbt;
  src: url(./assets/regularfont.otf);
}

.mindar-ui-overlay {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
}


body{
  height: 100%;
  width: 100%;
  /* font-family: font-home; */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


/* #page1{
  display: none;
} */
.spacer{
  height: 20px;
}

#imageOverlay{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 35vh;
  height: 35vh;
  opacity: 1;
  background-image: url('./assets/t-shirt.gif');
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center; 
  z-index: 9999;
}

#win{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vh;
  height: 40vh;
  opacity: 1;
  background-image: url('./assets/WinnerCard.png');
  background-size: contain; 
  background-repeat: no-repeat;
  /* background-position: center;  */
  z-index: 999;
}

#wintext {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  color: #77560e;
}

#nextbtn {
  display: block;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 18vh;
  height: 6vh;
  opacity: 1;
  background-image: url('./assets/Next.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9999;
}

#playagain{
  display: block;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 17vh;
  height: 6vh;
  opacity: 1;
  background-image: url('./assets/playagain.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9999;
}

#winlast{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45vh;
  height: 45vh;
  opacity: 1;
  background-image: url('./assets/WinnerCard1.png');
  background-size: contain; 
  background-repeat: no-repeat;
  z-index: 999;
}

#wintext2 {
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0%);
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  color: #77560e;
}

#website{
  position: absolute;
  bottom: 21%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0%);
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  color: #77560e; 
}

#couponcode{
  position: absolute;
  bottom: 14.5%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  color: #77560e;
}

#copybtn{
  position: absolute;
  bottom: 14.5%;
  right: 32%;
  width: 2vh;
  height: 2vh;
  opacity: 1;
  background-image: url('./assets/copy.png');
  background-size: contain; 
  background-repeat: no-repeat;
  z-index: 999;
}

#loosetext {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  color: #77560e;
}

#loose{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vh;
  height: 40vh;
  opacity: 1;
  background-image: url('./assets/TimeupCard.png');
  background-size: contain; 
  background-repeat: no-repeat;
  z-index: 9999;
}



/* #restartbtn {
  display: block;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 17vh;
  height: 9vh;
  opacity: 1;
  background-image: url('./assets/Play.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9999;
} */



#textpage1{
  position: absolute;
  width: 100%;
  transform: translate(-50%, 0%);
  left: 50%;
  bottom: 10%;
  z-index: 2;
  
}

#textpage1 p{
  font-family: 'blackbt';
  text-align: center;
  cursor: pointer;
  font-size: 25px;
  color: rgb(255, 255, 255);
  /* font-weight: bold; */
}

#blackbg{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.349);
  z-index: 1;
}

#central-timer-container {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* White text for the timer */
  z-index: 9999;
}

#countdown-timer {
  font-size: 150px; /* Adjust font size as desired */
  font-weight: bold;
}

#timerbackground{
  display: none;
background-color: rgba(0, 0, 0, 0.185);
position: absolute;
height: 100%;
width: 100%;
z-index: 5;
}