@font-face {
  font-family: "calculator";
  src: url("./digital-7-font/Digital7Monoitalic-8xKz.ttf");
}

body {
  height: 100vh;
  background-color: #000 !important;
  overflow: hidden;
  font-family: 'Bruno Ace', cursive;
  user-select: none;
}

.first-sec {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-family: 'Bruno Ace', cursive;
}

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

.first-sec .focus {
  top: 36%;
  animation: title-blur .7s  linear forwards , title-vanish 3s 2.5s linear forwards;
}

@media (max-width: 767px) {
  .first-sec .focus {
    scale: 1.4;
  }
}

.first-sec .six-colors {
  bottom: -30%;
  animation: title-blur 1s 10s linear forwards , title-vanish 2s 18s linear forwards;
}

.first-sec .oops {
  bottom: -30%;
  animation: title-blur 2s 18s linear forwards , title-vanish 2s 24s linear forwards;
}

.first-sec .lost-color {
  top: 40%;
  left: 50%;
  translate: -50% -50%;
  animation: title-blur 1s 25s linear forwards , title-vanish 1s 28s linear forwards;
}

.first-sec .main-cards-con {
  position: absolute;
  transform-origin: bottom left;
  width: 160px;
  height: 240px;
  top: 25%;
  left: 65.7%;
  translate: -50% -50%;
  animation: sec-spin 4s 12s linear ,sec-spin .27s  16s linear  infinite ,sec-spin 0.1s  19s linear  forwards, sec-hide 2s 22s forwards ,cards-spin .6s 22s linear infinite;
}

.first-sec .main-cards-con 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 5.5s linear  forwards , cards-spin-back 1.5s 8.5s linear forwards;
}

.first-sec .main-cards-con #second-round {
  animation: cards-spin2 0.01s  linear  forwards;
}

@media (max-width: 800px) {
  .first-sec {
    scale: .64;
  }
}

.second-sec {
  margin-top: -70px;
}

.second-sec .row div {
  transform-origin: center left;
  width: 200px;
  height: 200px;
  scale: 0 1;
  filter: blur(40px);
  cursor: pointer;
  animation: colors-in .3s linear forwards;
  animation-delay: calc(.3s * var(--d));
}

@media (max-width: 767px) {
  .second-sec .row div {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 767px) {
  .second-sec {
    margin-top: -100px;
  }
}

.third-sec {
  font-family: 'Bruno Ace', cursive;
}

.third-sec i {
  color: gold;
}

.third-sec p {
  color: #fff;
}

@media (max-width: 767px) {
  .third-sec p {
    font-size: 18px;
  }
}

.btn-counter {
  top: 90%;
}

.btn-counter span {
  font-family: "calculator";
  translate: 0 -6px;
  scale: 1.3;
}

@media (max-width: 767px) {
  .btn-counter span {
    scale: 1.8;
  }
}

@media (max-width: 767px) {
  .btn-counter {
    top: 85%;
    scale: .8;
  }
}

.volume-con {
  top: 86%;
}

@media (max-width: 767px) {
  .volume-con {
    top: 75%;
  }
}

@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);
  }
}

@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 sec-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes sec-hide {
  to {
    scale: 0;
    display: none;
  }
}

@keyframes set-opacity {
  to {
    opacity: 1;
  }
}

@keyframes colors-in {
  to {
    scale: 1;
    filter: blur(0px);
  }
}

@keyframes trick {
  to {
    translate: 0 15px;
  }
}