@font-face {
    font-family: 'PWFilament';
    src: url('../../@/PWFilament.eot');
    src: url('../../@/PWFilament.woff2') format('woff2'),
        url('../../@/PWFilament.woff') format('woff'),
        url('../../@/PWFilament.ttf') format('truetype'),
        url('../../@/PWFilament.svg#PWFilament') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
  --transition-animation-duration: 0.25s;
  --bg-x: -25%;
  --bg-y: -25%;
}

html,
body {
  height: 100%;
  background: #030507;
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

h1 {
  /*display: table;
  margin: 0 0;*/
  font-family: 'PWFilament';
  font-weight: 400;
  font-size: 3em;
    transform: rotate(-35deg);
  background: linear-gradient(330deg, #e0525240 0%, #FD742740 25%, #FD742740 50%, #FD742740 75%, #e0525240 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999999999999;
}

h1 {
	animation: fadeInAnimation ease 7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
	@keyframes fadeInAnimation {
    0% {
        opacity: 0.00
    }

        25% {
        opacity: 0.25
    }

        50% {
        opacity: 0.50
    }

        75% {
        opacity: 0.75
    }

    100% {
        opacity: 1.00
    }
  }

::-webkit-scrollbar {
  display: none;
}


templates {
  display: none;
}

.flex {
	animation: fadeInAnimation ease 4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
	@keyframes fadeInAnimation {
    0% {
        opacity: 0.00
    }

        25% {
        opacity: 0.25
    }

        50% {
        opacity: 0.50
    }

        75% {
        opacity: 0.75
    }

    100% {
        opacity: 1.00
    }
  }


.flex {
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

.countdown {
  width: 500px;
  max-width: 90vw;
}

.digit,
.divider {
  display: flex;
  margin: 0 -10px;
}
.digit svg,
.divider svg {
  width: 100%;
}
.digit svg path:last-of-type,
.divider svg path:last-of-type {
  transform: scaleY(2.5) scaleX(0.4) !important;
  filter: blur(20px) !important;
}

.digit {
  transition: var(--transition-animation-duration) cubic-bezier(0, 0, 0, 0.97);
}
.digit.animate-transition {
  transform: scale(1.1);
  mix-blend-mode: plus-lighter;
  filter: brightness(1.5) drop-shadow(2px 2px 14px #d1450e);
}
.digit.animate-transition path {
  stroke: rgba(255, 106, 40, 0.95) !important;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../art.di/art.85seconds.to.armageddon.avif");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  transform: translateX(var(--bg-x)) translateY(var(--bg-y)) scale(1.5);
  animation: blink 1s ease-out infinite alternate;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse, transparent 50%, #000);
}

@keyframes blink {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.1;
  }
}