html {
  box-sizing: border-box;
}

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

body {
  --box-size: 160px;

  background-image: url(bg_page.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* height: 100vh; */
  color: rgb(217 127 49) !important;
  font-family: "Lato", sans-serif !important;
  /* overflow: hidden !important; */
}

.name {
  font-size: 1em;
  font-weight: 100;
  /* position: absolute; */
  top: 50%;
  font-family: Montserrat;
  line-height: 2;
  width: 400px;
}

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

.bottom, .front, .left, .back, .right {
  background-size: cover;
  height: var(--box-size);
  left: 0;
  position: absolute;
  top: 0;
  width: var(--box-size);
  animation: pulsate-shadow 1s ease-out infinite;
}

@keyframes pulsate-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(217 127 49);
  }

  70% {
    box-shadow: 0 0 10px 2px rgba(217 127 49);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(217 127 49);
  }
}

bt-pulsate-shadow {
  animation: pulsate-shadow 1s ease-out infinite !important;
  background-color: rgba(217 127 49) !important;
  ;
}

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

.btnmystery-primary {
  background-color: #d57b30 !important;
  ;
  animation: pulsate-shadow 1s ease-out infinite !important;
  color: #ffffff;
  font-weight: 900;
  border-color: #d57b30;
}

.btnmystery-primary:hover {
  background-color: rgba(154, 126, 4, 0.872);
  border-color: #d57b30;
  font-weight: 900;
}

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

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

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

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

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

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

.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: 170px;
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

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

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

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

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

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

.lid-top, .lid-left, .lid-back, .lid-right, .lid-front {
  background-size: cover;
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 170px;
  min-width: 170px;
  /* animation: pulsate-shadow 1s ease-out infinite; */
}

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

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


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

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

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

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

.slower {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;

}

.present {
  display: grid;
  justify-content: center;
}

.box {
  display: block;
  height: var(--box-size);
  width: var(--box-size);
  perspective: 400px;
  transform: translateY(50%);
  margin: 0 auto;
}

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

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

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

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

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

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

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

.present.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%;
}

.card-box {
  padding-bottom: 15px;
  margin-top: -90px !important;
}

.logo-draw{
  display: flex;
  justify-content: center;
	margin-bottom: 20px;
}


@media screen and (max-width: 600px) {
  .card-box {
    padding-bottom: 100px;
    margin-top: -20px !important;
  }
  .logo-draw {
    display: block;
  }
}

#postRunMessages {
  position: relative;
  z-index: 100;
  margin-top: 10px;
}

.prize-section {
  position: relative;
  top:-237px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .container-prize-image{
    height: 200px;
    display: none; /* hide image by default. When have to show, will display grid */
    align-items: center;

    .opened-prize-image {
      max-height: 200px;
      width: 100%;
    }
  }
}

.container-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 100px;
}

@media (max-width: 400px) {
  .container-boxes {
    grid-template-columns: repeat(1, 1fr);
    gap: 150px;
  }
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}