/* Minimal styles. Edit as you like. */
:root{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --gap: 14px;
}

#promo-root{
  text-align:center;
  padding:5px;
  border-radius:10px;
  background: none;
}
#countdown{
  display:flex;
  gap:var(--gap);
  justify-content:center;
  margin-top:8px;
}
.time-part{
  min-width:72px;
  padding:5px 5px;
  border-radius:8px;
  background:#00AED2; /* faint background */
}
.time-part span{
  display:block;
  font-size:24px;
  font-weight:700;
}
.time-part small{
  display:block;
  font-size:12px;
  opacity:0.9;
  margin-top:-9px;
}
#expired-message{
  margin-top:12px;
  font-weight:600;
  color:#E20000;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* H, V, blur, color with opacity */
}

/* SLIDE IN MESSAGE*/
@keyframes slideIn {
  0% {
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* End at its original position */
    opacity: 1;
  }
}

.slide-message {
  animation: slideIn 4s ease-out forwards; /* Name, duration, timing, fill-mode */
}
/*END SLIDE IN MESSAGE*/