@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  background-color: #000228;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  color: rgba(252, 206, 0, 0.822) !important;
  font-family: 'Poppins', sans-serif !important;

  /* overflow: hidden !important; */
}


.height-100 {
  height: 100vh;
}

.prize {
  font-size: 1em;
  font-weight: 900;
  /*position: absolute;*/
  top: 50%;
  font-family: 'Poppins', sans-serif;
  line-height: 2;
  width: 100px;
  color: tomato;
}

.instruction {
  bottom: -100px;
  left: 0;
  opacity: 1;
  position: absolute;
  text-align: center;
  transition: opacity 0.5s;
  width: 100%;
}

.rotate-container {
  -webkit-animation: box-rotate 10s infinite linear;
  animation: box-rotate 10s infinite linear;
  height: 100%;
  transform: rotateY(170deg);
  transform-style: preserve-3d;
}

@-webkit-keyframes box-rotate {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes box-rotate {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.bottom {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  animation: pulsate-shadow 1s ease-out infinite;
}

.front {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  animation: pulsate-shadow 1s ease-out infinite;
}

.left {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  animation: pulsate-shadow 1s ease-out infinite;
}

.back {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  animation: pulsate-shadow 1s ease-out infinite;
}

.right {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  animation: pulsate-shadow 1s ease-out infinite;
}

@keyframes pulsate-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 206, 0, 0.822);
  }

  70% {
    box-shadow: 0 0 10px 2px rgba(252, 206, 0, 0.822);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(252, 206, 0, 0.822);
  }
}

bt-pulsate-shadow {
  animation: pulsate-shadow 1s ease-out infinite !important;
  background-color: rgba(252, 206, 0, 0.822) !important;
}

.btn-mystery {
  font-size: 1.2rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
}

.btn-mystery-primary {
  background-color: rgba(252, 206, 0, 0.822) !important;
  animation: pulsate-shadow 1s ease-out infinite !important;
  color: #11162d;
  font-weight: 900;
  border-color: rgba(252, 206, 0, 0.822);
}

.btn-mystery-winner {
  background-color: rgba(41, 233, 149, 0.82) !important;
  animation: pulsate-shadow 1s ease-out infinite !important;
  color: #11162d;
  font-weight: 900;
  border-color: rgba(252, 206, 0, 0.822);
}

.btn-mystery-primary:hover {
  background-color: rgba(154, 126, 4, 0.872);
  border-color: rgba(252, 206, 0, 0.822);
  font-weight: 900;
}

.bottom {
  transform: translateY(50%) rotateX(90deg);
}

.front,
.left,
.back,
.right {
  transition: transform 0.5s;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

/* .lid-top:before { */
  /* background-color: #f2e6c0; */
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
  /* content: ""; */
  /* height: 20px; */
  /* left: 0; */
  /* position: absolute; */
  /* top: calc(50% - 10px); */
  /* transform: translateZ(0.1px); */
  /* width: 100%; */
/* } */

.left {
  transform: translateX(-50%) rotateY(-90deg);
}

.back {
  transform: translateZ(-50px) rotateY(180deg) rotateX(0);
}

.right {
  transform: translateX(50%) rotateY(90deg);
}

.front {
  transform: translateZ(50px);
}

.lid {
  -webkit-animation: lid-animation 3.5s 1s infinite;
  animation: lid-animation 3.5s 1s infinite;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

@-webkit-keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }

  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }

  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }

  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}

@keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }

  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }

  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }

  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }

  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}

.lid-top {
  height: 110px;
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left,
.lid-back,
.lid-right,
.lid-front {
  height: 20px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left {
  transform: translateX(-50%) rotateY(-90deg);
}

.lid-back {
  transform: translateZ(-55px) rotateY(180deg);
}

.lid-right {
  transform: translateX(50%) rotateY(90deg);
}

.lid-front {
  transform: translateZ(55px);
}

.lid-top {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 110px;
  animation: pulsate-shadow 1s ease-out infinite;
}

.lid-left {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 110px;
  animation: pulsate-shadow 1s ease-out infinite;
}

.lid-back {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 110px;
  animation: pulsate-shadow 1s ease-out infinite;
}

.lid-right {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 110px;
  animation: pulsate-shadow 1s ease-out infinite;
}

.lid-front {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 110px;
  animation: pulsate-shadow 1s ease-out infinite;
}


.spin-faster > div {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.box {
  height: 100px;
  left: 0;
  margin: 0 auto;
  perspective: 400px;
  /* position: absolute; */
  right: 0;
  top: 50%;
  transform: translateY(50%);
  width: 100px;
}

.box:hover .lid {
  -webkit-animation: none;
  animation: none;
  transform: translate3d(0, -12px, -10px) rotateX(10deg);
}

.box.open .prize {
  transform: translate3d(0, -50%, 10px) rotateY(1080deg) rotateX(10deg);
}

.box.open .instruction {
  opacity: 0;
}

.box.open .left {
  transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg);
}

.box.open .back {
  transform: translateZ(-50px) rotateY(180deg) rotateX(-90deg);
}

.box.open .right {
  transform: translateX(50%) rotateY(90deg) rotateX(-90deg);
}

.box.open .front {
  transform: translateZ(50px) rotateX(-90deg);
}

.box.open .lid {
  -webkit-animation: none;
  animation: none;
  transform: translate3d(0, -120px, -120px) rotateX(50deg);
}

canvas {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.mb-5 {
  margin-bottom: 1rem !important;
}

.p-label {
  margin-bottom: 0;
}

/* Important part */
.modal-dialog {
  overflow-y: initial !important
}

.modal-body {
  height: 80vh;
  overflow-y: auto;
}

.modal-title {
  color: black
}


/* Existing CSS code */

@media (max-width: 768px) { /* Adjust the breakpoint to your needs */
  
  .box {
    height: 50px;
    left: 0;
    margin: 0 auto;
    perspective: 400px;  
    width: 50px;
  }

  .box:hover .lid {
    transform: translate3d(0, -6px, -5px) rotateX(10deg); /* Adjust the lid transformation for mobile */
  }

  .box.open .prize {
    transform: translate3d(0, -50%, 5px) rotateY(1080deg) rotateX(10deg); /* Adjust the prize transformation for mobile */
  }

  .box.open .left {
    transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg); /* Adjust the left transformation for mobile */
  }

  .box.open .back {
    transform: translateZ(-25px) rotateY(180deg) rotateX(-90deg); /* Adjust the back transformation for mobile */
  }

  .box.open .right {
    transform: translateX(50%) rotateY(90deg) rotateX(-90deg); /* Adjust the right transformation for mobile */
  }

  .box.open .front {
    transform: translateZ(25px) rotateX(-90deg); /* Adjust the front transformation for mobile */
  }

  .box.open .lid {
    transform: translate3d(0, -60px, -60px) rotateX(50deg); /* Adjust the lid transformation for mobile */
  }

.left {
  transform: translateX(-25px) rotateY(-90deg);
}

.back {
  transform: translateZ(-25px) rotateY(180deg) rotateX(0);
}

.right {
  transform: translateX(25px) rotateY(90deg);
}

.front {
  transform: translateZ(25px);
}

 .lid-left,
.lid-back,
.lid-right,
.lid-front {
  height: 12px;
  top: -5px;
  transform-style: preserve-3d;
}


.lid-left {
  transform: translateX(-28px) rotateY(-90deg);
}

.lid-back {
  transform: translateZ(-28px) rotateY(180deg);
}

.lid-right {
  transform: translateX(28px) rotateY(90deg);
}

.lid-front {
  transform: translateZ(28px);
}


.lid-top {
  height: 55px;
  top: -2px; 
  transform-style: preserve-3d;
}

.lid-top { 
  left: -2px; 
  position: absolute; 
  width: 55px; 
}

.lid-left { 
  left: -2px; 
  position: absolute; 
  width: 55px;  
}

.lid-back { 
  left: -2px; 
  position: absolute; 
  width: 55px; 
}

.lid-right { 
  left: -2px; 
  position: absolute; 
  width: 55px; 
}

.lid-front { 
  left: -2px; 
  position: absolute; 
  width: 55px; 

}

.prize {
  font-size: 10px;
  font-weight: 900; 
  top: 50%;
  font-family: 'Poppins', sans-serif;
  line-height: 2;
  width: 50px;
  color: tomato;
}

.h4{
    font-size: 17px;
}

.h5{
    font-size: 14px;
}

.p-1 {
    padding: 0.25rem!important;
    margin-top: 25px !important;
    width: 70%;
}


}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

div.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}