/* General styling for the countdown container */
.countdown {
  font-family: Arial, sans-serif;  /* Set the font family */
  font-size: 24px;                  /* Set the font size */
  text-align: center;               /* Center-align the text */
  margin-top: 20px;                 /* Add top margin */
}

/* Styling for each countdown item (days, hours, minutes, etc.) */
.countdown-item {
  display: inline-block;  /* Use inline-block for layout */
  margin: 0 10px;         /* Add horizontal margin */
}

/* Styling for the actual countdown numbers */
.countdown-value {
  font-size: 48px;              /* Set the font size for the numbers */
  background-color: #f1f1f1;    /* Set background color */
  padding: 20px 10px;           /* Add padding */
  border-radius: 5px;           /* Round the corners */
}

/* Styling for the labels (like "Days", "Hours", etc.) */
.countdown-label {
  font-size: 14px;       /* Set the font size */
  margin-top: 5px;       /* Add top margin */
}

/* Styling for the dark-themed countdown container */
.countdown.dark {
  font-family: Arial, sans-serif;  /* Set the font family */
  font-size: 24px;                  /* Set the font size */
  text-align: center;               /* Center-align the text */
  margin-top: 20px;                 /* Add top margin */
  color: white;                     /* Set text color to white */
}

/* Styling for each dark-themed countdown item */
.countdown.dark .countdown-item {
  display: inline-block;  /* Use inline-block for layout */
  margin: 0 10px;         /* Add horizontal margin */
}

/* Styling for the actual dark-themed countdown numbers */
.countdown.dark .countdown-value {
  font-size: 48px;              /* Set the font size for the numbers */
  background-color: #4b4b4b;    /* Set background color */
  padding: 20px 10px;           /* Add padding */
  border-radius: 5px;           /* Round the corners */
}

/* Styling for the dark-themed labels */
.countdown.dark .countdown-label {
  font-size: 14px;       /* Set the font size */
  margin-top: 5px;       /* Add top margin */
}

/* Media query for smaller screens */
@media screen and (max-width: 507px) {
  /* Adjust the font size for smaller screens */
  .countdown,
  .countdown.dark {
    font-size: 18px;  /* Set the font size */
  }

  /* Adjust the margin for each countdown item for smaller screens */
  .countdown-item,
  .countdown.dark .countdown-item {
    margin: 0 5px;  /* Adjust horizontal margin */
  }

  /* Adjust the font size and padding for the countdown numbers for smaller screens */
  .countdown-value,
  .countdown.dark .countdown-value {
    font-size: 36px;    /* Set the font size for the numbers */
    padding: 15px 5px;  /* Adjust padding */
  }

  /* Adjust the font size for the labels for smaller screens */
  .countdown-label,
  .countdown.dark .countdown-label {
    font-size: 12px;  /* Set the font size */
  }
}