.countdown {
  font-family: var(--title-font);
  font-weight: bold;
  position: relative;
  top: 2rem;
  z-index: 1;
}
.countdown .flex-wrapper {
  background-color: var(--nerd-black);
  border: 2px solid var(--nerd-green);
  border-radius: 4px;
  display: inline-flex;
  gap: 0 1.5rem;
  margin: 0 auto;
  padding: 1rem 2rem;
}
.countdown h3 {
  color: var(--nerd-green);
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 -.3rem;
}
.countdown p {
  color: white;
  font-size: 1.8rem;
	letter-spacing: .06em;
  line-height: 1;
  margin: 0;
}
.countdown p span {
  color: var(--nerd-yellow);
  font-size: 3.5rem;
  display: block;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .toninas1 {
    animation: rotateFull ease-out forwards;
    animation-timeline: view();
    animation-range: 0 50%;
    will-change: transform;
  }
  .toninas2 {
    animation: rotateFullBack ease-out forwards;
    animation-timeline: view();
    animation-range: 0 50%;
    will-change: transform;
  }
}

@keyframes rotateFull {
  from {
    opacity: 0;
    transform: rotate(360deg);
  }  
  to { opacity: 1; }
}

@keyframes rotateFullBack {
  from {
    opacity: 0;
    transform: rotate(-360deg);
  }  
  to { opacity: 1; }
}

@media screen and (max-width: 40em) /* 640 */{
	.countdown .flex-wrapper {
		border: 0;
    padding: 1rem;
	}
  .countdown p { font-size: 1.3rem; }
}