/* Page base */
html, body {
  height: 100%;
  margin: 0;
}

/* Countdown tiles */
.countdown {
  font-family: 'Lobster', cursive;
  text-align: center;
  height: calc(100vh / 3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 14px;
}

.countdown h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.countdown p {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* Progress area */
.progress-wrap {
  width: 88%;
  max-width: 640px;
  margin: 8px auto 0 auto;
}

.progress {
  height: 12px;
  background: rgba(255, 255, 255, 0.35);
}

.progress-bar {
  transition: width 0.6s ease;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 6px;
  text-shadow: none; /* vypnuté, nech je čierny text čistý */
}

/* Gradient backgrounds for different holidays */
.one   { background: linear-gradient(to bottom right, #D35400, #E59866); } /* Autumn */
.two   { background: linear-gradient(to bottom right, #CB4335, #58D68D); } /* Christmas */
.three { background: linear-gradient(to bottom right, #52BE80, #D2B4DE); } /* Spring */
.four  { background: linear-gradient(to bottom right, #F7DC6F, #D4E6F1); } /* Easter */
.five  { background: linear-gradient(to bottom right, #16A085, #5DADE2); } /* Summer */

/* Čierny text všade */
.countdown, .countdown h2, .countdown p, .progress-label {
  color: #000;
}

@media (max-width: 575.98px) {
  .countdown {
    height: auto;
    min-height: 33vh;
  }
  .countdown p {
    font-size: 1.7rem;
  }
}