/* .logo{
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-family: 'Bruno Ace', cursive;
    @media(max-width:767px){
        scale: .65;
    }
    .logo-con{
      perspective: 200px;
      top: 40%;
      left: 40%;
      translate: -50% -50%;
      scale: .6;
      animation: set-opacity .1 linear forwards, title-vanish 1.2s 6.5s forwards;
      div{
      width: 30px;
      position: absolute;
      background-color: #fff;

  }
  .div1{
     height: 80px;

     animation:logo-in1  0.5s linear forwards,shadow 1s 2.5s linear forwards;

  }
  .div2{
      top: -59px;
      left: -7.5px;
      height: 60px;
      transform: skew(-35deg);
      animation:logo-in2  1s linear forwards,shadow 1s 2.5s linear forwards;

  }
  .div3{
      top: -60px;
      left: 80px;
     height: 140px;
     transform: skew(-35deg);
     animation:logo-in2  1.5s linear forwards,shadow 1s 2.5s linear forwards;
  }
  .div4{ 
     height: 80px;
     transform: skew(35deg);
      opacity: 0;
      animation: logo-in3 1s 2s linear forwards,shadow 1s 2.5s linear forwards;
  }
  .div5{
      top: -60px;
      left: -7px;
      height: 60px;
      opacity: 0;
      transform: skew(-35deg);
      animation: logo-in4 1s 2s linear forwards,shadow 1s 2.5s linear forwards;


  }
  }

    p{
    position: absolute;
    width: 500px;
    opacity: 0;
    text-shadow: 0px 0px 20px #fff;
    filter: blur(17px);
    font-weight: bold;

    }
    .focus{
      top: 36%;
      animation: title-blur .7s 7.2s linear forwards , title-vanish 1s 9.2s linear forwards;
     @media(max-width: 767px){
      scale: 1.4;
     }
    }
    .keen-on{
      bottom: -30%;
      animation: title-blur 1.5s 10s linear forwards , title-vanish 2s 14s linear forwards;
      >span{
        color: #e44bef;
      }
    }
    .keen-on-ani{
        bottom: 220px;
        left: 32%;
        translate: -50%;
        animation: hidden 0.5s 6.5s forwards;
        div{
            position: absolute;
             opacity: 0;

           }
    }
    .keen-on-in{
        animation: keen-on .4s linear forwards,shadow .8s linear alternate ;
        animation-delay: calc(.25s * var(--d));
    }
}

//Logo keyframes

@keyframes logo-in1{
    from{
        transform: translateZ(300px);
    }
    to{
        transform: translateZ(0px)skew(35deg);

    }

}
@keyframes logo-in2{
    from{
        transform: translateZ(300px);

    }
    to{
        transform: translateZ(0px)skew(-35deg);


    }

}
@keyframes logo-in3{

    to{

        transform:  translateX(105px) translateY(-59px) skew(35deg);
        opacity: 1;
    }

}
@keyframes logo-in4{

    to{

        transform:  translateX(119px) translateY(80px) skew(-35deg);
        opacity: 1;
    }

}
@keyframes shadow {

    to{
        box-shadow: 0px 0px 30px #fff;
    }
}
@keyframes title-blur {
    to{
      opacity: 1;
      filter: blur(0px);
    }
  }
  @keyframes title-vanish {
    to{
      opacity: 0;
      filter: blur(17px);
    }
  }
   */
/* 
 .main-cards-con{
    position: absolute;
    transform-origin: bottom left;
    width: 150px;
    height: 230px;
    top: 25%;
    left: 65.7%;
    translate: -50% -50%;


    div{
      position: absolute;
      transform-origin: bottom left;
      width: 100%;
      height: 100%;
      opacity: 0;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
       animation: cards-spin 1s 10.5s linear  forwards , cards-spin-back 1.5s 14s linear forwards,hidden .75s 15s linear forwards
         ; 
    }

  }

// Rose keyframes

@keyframes cards-spin{
    to{
      opacity: 1;
      rotate: calc(60deg * var(--d));

    }
  }
  @keyframes cards-spin-back{
    to{

      opacity: 1;
      rotate: calc(-60deg * var(--d));

    }
  }
  @keyframes cards-spin2{
    to{
      opacity: 1;
      rotate: calc(72deg * var(--d));

    }
  }
  @keyframes hidden{
    to{
        opacity: 0;
    }
  }

 @keyframes keen-on{
    to{
       opacity: 1;
       translate: calc(20px * var(--d));
    }
} 
  */
* {
  box-sizing: border-box;
  font-family: "Bruno Ace", cursive;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
body .btns-con {
  position: absolute;
  top: 20px;
}
@media (max-width: 767px) {
  body .btns-con {
    top: 0;
  }
}
body .btns-con .btn {
  width: 100px;
  font-family: "Bruno Ace", cursive;
  letter-spacing: 1.5px;
}
body .btns-con .reset {
  top: 93px;
  position: absolute;
  left: 110px;
}
@media (max-width: 767px) {
  body .btns-con {
    left: 3vw;
    scale: 0.7;
  }
}
@media (min-width: 767px) {
  body .btns-con {
    left: 3vw;
  }
}
@media (min-width: 900px) {
  body .btns-con {
    left: 18vw;
  }
}

.instructions {
  top: 3%;
  right: 4%;
}
@media (min-width: 767px) {
  .instructions {
    right: 10%;
    scale: 1.3;
  }
}
@media (min-width: 1300px) {
  .instructions {
    right: 20%;
    scale: 1.5;
  }
}
.instructions .list {
  width: 260px;
  height: 420px;
  top: 120px;
  right: 35px;
  font-size: 0.6rem;
  background-color: rgba(8, 8, 8, 0.6980392157);
  border: 1px solid #fff;
  font-family: "Bruno Ace", cursive;
  transform-origin: top right;
  scale: 0;
  -webkit-backdrop-filter: hue-rotate(260deg);
          backdrop-filter: hue-rotate(260deg);
}
.instructions .list > li {
  margin-bottom: 5px;
}
.instructions .list > li::before {
  content: "";
  position: absolute;
  translate: -12px 4.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #0393af;
}
@media (min-width: 767px) {
  .instructions .list {
    top: 20px;
    right: 40px;
  }
}
.instructions .list .smile {
  font-size: 0.8rem;
}
.instructions .list dt {
  color: #4da0f8;
}
.instructions .list i {
  color: orange;
}
.instructions .icon {
  right: 10px;
  animation: icon-scale 1s 5s 6 alternate;
  cursor: pointer;
}
.instructions .icon i {
  background-color: #0dcaf0;
}
.instructions span {
  color: #e44bef;
}
.instructions .show-instructions {
  animation: show-instructions 0.7s linear forwards;
}
.instructions .hide-instructions {
  animation: hide-instructions 0.7s linear forwards;
}

.sec-one {
  width: 120px;
  height: 180px;
  translate: 50% -67%;
  scale: 1.3;
}
@media (max-width: 767px) {
  .sec-one {
    scale: 1 0.9;
  }
}
.sec-one .count-card-con {
  position: absolute;
  bottom: 0;
  scale: 1.2;
}
.sec-one .count-card-con .countdown {
  color: #fff;
  font-family: "Righteous", cursive;
  font-size: 2rem;
}
.sec-one .count-card-con .middle-card {
  width: 60px;
  height: 80px;
  background-color: #ffffff;
  font-size: 2rem;
  border-radius: 1rem;
  border: 2px solid #b0b2b3;
  box-shadow: inset -1px -1px 6px #8a8b8b;
}
.sec-one div div {
  transform-origin: left bottom;
  position: absolute;
  width: 100%;
  height: 100%;
}
.sec-one div .div-in {
  animation: div-spin 2s 1s linear forwards;
}
.sec-one div > span {
  position: absolute;
  width: 60px;
  height: 80px;
  background-color: #ffffff;
  border-radius: 1rem;
  cursor: pointer;
  border: 2px solid #b0b2b3;
  box-shadow: inset -1px -1px 6px #8a8b8b;
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  .sec-one div > span {
    width: 55px;
    height: 75px;
    font-size: 1.4rem;
    scale: 1.1;
  }
}
@media (min-width: 767px) {
  .sec-one div > span {
    scale: 1.2;
  }
}
.sec-one div .cards-in {
  animation: span-spin 3s 0.16s linear forwards;
}
@media (max-width: 767px) {
  .sec-one div .cards-level-one {
    font-size: 2rem;
  }
}
.sec-one div .filter {
  animation: cards-filter 1s linear forwards;
}

.timer {
  position: absolute;
  top: 18px;
  left: 130px;
  font-size: large;
}
.timer input {
  width: 60px;
}

.volume-con {
  bottom: 7%;
}

.result-con {
  width: 100%;
  left: 50%;
  bottom: 16%;
  translate: -50%;
  font-family: "Bruno Ace", cursive;
}
@media (max-width: 767px) {
  .result-con {
    scale: 0.7;
  }
}
.result-con .output,
.result-con .output2 {
  cursor: pointer;
  width: 100px;
  border-radius: 0.5rem;
}
.result-con span {
  font-size: x-large;
}

.infos {
  bottom: 6%;
  color: #fff;
  font-family: "Bruno Ace", cursive;
}
@media (max-width: 767px) {
  .infos {
    scale: 0.8;
  }
}
@media (min-width: 767px) {
  .infos {
    scale: 1.2;
  }
}
.infos .star {
  color: gold;
  font-size: x-large;
}

@keyframes cards-filter {
  to {
    filter: blur(25px);
  }
}
@keyframes div-spin {
  to {
    rotate: calc(60deg * var(--d));
  }
}
@keyframes span-spin {
  to {
    rotate: calc(-60deg * var(--d));
  }
}
@keyframes icon-scale {
  to {
    color: #ffffff;
    scale: 1.25;
  }
}
@keyframes right-card {
  to {
    color: #cddc39;
  }
}
@keyframes show-instructions {
  to {
    scale: 1;
  }
}
@keyframes hide-instructions {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}
.focus {
  top: 36%;
  opacity: 0;
  animation: title-blur 0.7s 1s linear forwards, title-vanish 1s 4s linear forwards;
}

@keyframes title-blur {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes title-vanish {
  to {
    opacity: 0;
    filter: blur(17px);
  }
}/*# sourceMappingURL=index.css.map */