/* From Uiverse.io by whoisyourdeadie */
/* improved corner radius and shadows */
.counter-container {
  --height: 200px;
  --width: 140px;
  --gap: 20px;
  --font-size: 145px;
  --margin-top: 0px;
  --margin-bottom: 0px;

  height: var(--height);
  position: relative;
  text-align: center;
  display: flex;
  gap: var(--gap);
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
}

.nums {
  box-shadow:
    0 1px 2px rgba(42, 42, 42, 0.2),
    0 2px 4px rgba(42, 42, 42, 0.2),
    0 4px 8px rgba(42, 42, 42, 0.2),
    0 8px 16px rgba(42, 42, 42, 0.2),
    0 16px 32px rgba(42, 42, 42, 0.2);
  display: inline-block;
  height: var(--height);
  perspective: 1000px;
  position: relative;
  width: var(--width);
  border-radius: 5px 5px 5px 5px;
}

.nums:before {
  border-bottom: 2px solid black;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: translate3d(0, -1px, 0);
  top: 50%;
  width: 100%;
  z-index: 1000;
}

.nums:after {
  backface-visibility: hidden;
  background: #2a2a2a;
  border-radius: 0 0 5px 5px;
  bottom: 0;
  box-shadow: inset 0 15px 50px #202020;
  color: #eeeeee;
  content: "0";
  display: block;
  font-size: var(--font-size);
  height: calc(50% - 1px);
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
  z-index: 0;
}

.num {
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  border-radius: 5px;
  font-size: var(--font-size);
  height: 100%;
  left: 0;
  position: absolute;
  transform: rotateX(0);
  transition: 0.6s;
  transform-style: preserve-3d;
  top: 0;
  width: 100%;
}

.num:before,
.num:after {
  backface-visibility: hidden;
  color: #eeeeee;
  display: block;
  height: 50%;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
}

.num:before {
  background: #181818;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 15px 50px #111111;
  content: attr(data-num);
  line-height: 1.38;
  top: 0;
  z-index: 1;
}

.num:after {
  background: #2a2a2a;
  border-bottom: 1px solid #444444;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 15px 50px #202020;
  content: attr(data-num-next);
  height: calc(50% - 1px);
  line-height: 0;
  top: 0;
  transform: rotateX(180deg);
}

.nums-one .num:nth-of-type(1) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 0s;
  z-index: 10;
}
.nums-one .num:nth-of-type(2) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 1s;
  z-index: 9;
}
.nums-one .num:nth-of-type(3) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 2s;
  z-index: 8;
}
.nums-one .num:nth-of-type(4) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 3s;
  z-index: 7;
}
.nums-one .num:nth-of-type(5) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 4s;
  z-index: 6;
}
.nums-one .num:nth-of-type(6) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 5s;
  z-index: 5;
}
.nums-one .num:nth-of-type(7) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 6s;
  z-index: 4;
}
.nums-one .num:nth-of-type(8) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 7s;
  z-index: 3;
}
.nums-one .num:nth-of-type(9) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 8s;
  z-index: 2;
}
.nums-one .num:nth-of-type(10) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 9s;
  z-index: 1;
}

.nums-ten .num:nth-of-type(1) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 9s;
  z-index: 10;
}
.nums-ten .num:nth-of-type(2) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 19s;
  z-index: 9;
}
.nums-ten .num:nth-of-type(3) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 29s;
  z-index: 8;
}
.nums-ten .num:nth-of-type(4) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 39s;
  z-index: 7;
}
.nums-ten .num:nth-of-type(5) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 49s;
  z-index: 6;
}
.nums-ten .num:nth-of-type(6) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 59s;
  z-index: 5;
}
.nums-ten .num:nth-of-type(7) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 69s;
  z-index: 4;
}
.nums-ten .num:nth-of-type(8) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 79s;
  z-index: 3;
}
.nums-ten .num:nth-of-type(9) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 89s;
  z-index: 2;
}
.nums-ten .num:nth-of-type(10) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 99s;
  z-index: 1;
}

@keyframes num-one {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  10% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes num-ten {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  1% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}



div#switch_11 {
  width: max-content;
  overflow: hidden;
  margin: 0 auto;
}
.large .nums {
  max-height: 200px;
}
.counter-container.paused .num {
  animation-play-state: paused !important;
}