body{
  background-color: #000;
  overflow: hidden;
}
.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 0.7s linear forwards, title-vanish 1s 7s linear forwards;
}
@media (max-width: 767px) {
  .first-sec .focus {
    scale: 1.4;
  }
}
.first-sec .main-cards-con {
  position: absolute;
  transform-origin: bottom left;
  width: 160px;
  height: 240px;
  top: 25%;
  left: 65.7%;
  translate: -50% -50%;
}
.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 8.5s linear forwards, cards-spin-back 1.5s 11.5s linear forwards, hidden 0.75s 12.5s linear forwards;
}
@media (max-width: 800px) {
  .first-sec {
    scale: 0.64;
  }
}

span {
  color: #e44bef;
}

.sec-two {
  height: 100vh;
  background-color: #000;
}
@media (min-width: 767px) {
  .sec-two .container {
    width: 30vw;
  }
}
.sec-two .row {
  width: 100%;
}
.sec-two .glass-con {
  width: 100px;
  height: 100px;
}
@media (max-width: 767px) {
  .sec-two .glass-con {
    width: 80px;
    height: 80px;
  }
}
.sec-two .glass {
  transform: translateY(-100px);
  opacity: 0;
  transition: 2s;
  cursor: pointer;
  background: radial-gradient(ellipse at top left, #86fc00 17%, #344c01 73%);
  -webkit-clip-path: polygon(23% 0, 70% 0, 100% 100%, 0% 100%);
          clip-path: polygon(23% 0, 70% 0, 100% 100%, 0% 100%);
  animation: glasses-in 1.5s 16.5s linear forwards;
}
.sec-two .ball {
  width: 35px;
  height: 35px;
  translate: -400%;
  background: radial-gradient(ellipse at top left, #fc0f02 17%, #4b0101 73%);
  opacity: 0;
  animation: ball-in 2s 14s ease-out forwards;
}
@media (max-width: 767px) {
  .sec-two .ball {
    width: 25px;
    height: 25px;
  }
}
.case1 {
  animation: round 1s linear alternate infinite, round 1s 7s linear alternate forwards;
}

.case2 {
  animation: round 1s linear alternate infinite, end-round 1.5s 6.5s alternate forwards;
}

.case3 {
  animation: round 1s linear alternate infinite, round 1s 8s linear alternate forwards;
}

.case4 {
  animation: round 1s linear alternate infinite, end-round 1.5s 8.5s alternate forwards;
}

.glass-up {
  translate: 0px -100px;
  transition: 1s;
}
.sec-three {
  bottom: 16%;
  font-family: "Bruno Ace", cursive;
}
.sec-three .result {
  font-size: 22px;
}
@media (max-width: 767px) {
  .sec-three .result {
    font-size: 18px;
  }
}
.sec-three i {
  color: gold;
  scale: 2;
}

.btn {
  bottom: 6%;
  border: none;
}

.volume-con {
  bottom: 17%;
}

input[type=range] {
  cursor: pointer;
}
@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 hidden {
  to {
    opacity: 0;
  }
}
@keyframes glasses-in {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ball-in {
  to {
    translate: 30px;
    rotate: 360deg;
    opacity: 1;
  }
}
@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 glasses-in {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ball-in {
  to {
    translate: 30px;
    rotate: 360deg;
    opacity: 1;
  }
}
@keyframes ball-in {
  to {
    translate: 30px;
    rotate: 360deg;
    opacity: 1;
  }
}

@keyframes round {
  to {
    translate: calc(100% * var(--d));
  }
}

@keyframes end-round {
  to {
    translate: 0%;
  }
}