/* CSS styles for the page */
body {
  font-family: 'Arial', sans-serif;
  background-color: #edc743;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

h1 {
  font-size: 6vw; /* Responsive font size */
  color: #000000;
  margin-bottom: 5vh;
  text-align: center;
}

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 2vw; /* Adjust gap for smaller screens */
  flex-wrap: nowrap; /* Prevent wrapping */
  overflow-x: auto; /* Allow horizontal scrolling */
  max-width: 100%; /* Ensure container does not exceed viewport width */
}

.countdown-box {
  background-color: #f0f0f0;
  padding: 4vw; /* Responsive padding */
  border-radius: 10px;
  text-align: center;
  width: 20vw; /* Responsive width */
  min-width: 80px; /* Minimum width for smaller screens */
  box-sizing: border-box;
}

.countdown-box span {
  display: block;
  font-size: 5vw; /* Responsive font size */
  font-weight: bold; /* Make numbers bold */
  color: #333333;
}

.countdown-box small {
  font-size: 2vw; /* Responsive font size */
  color: #666666;
}

.birthdate {
  margin-top: 5vh;
  font-size: 4vw; /* Responsive font size */
  color: #000000;
  text-align: center;
}

a {
  color: #000000;
  text-decoration: none;
  margin-top: 2vh;
  display: inline-block;
  font-size: 4vw; /* Responsive font size */
  text-align: center;
}

/* General styling for the button */
.btn {
  display: flex;
  align-items: center;
  background-color: #000000; /* Background color */
  color: #ffffff; /* Text color */
  border: none;
  border-radius: 25px; /* Rounded corners */
  padding: 0.5em 1em; /* Adjusted padding for better responsiveness */
  text-decoration: none; /* Remove underline */
  font-family: 'Arial', sans-serif;
  font-size: 1.2em; /* Adjusted font size for better responsiveness */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.btn:hover {
  background-color: #33333300; /* Darker background on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}

.btn .sparkle {
  margin-right: 8px; /* Space between icon and text */
  fill: #ffffff; /* Icon color */
}

.btn .text {
  font-weight: bold; /* Bold text */
}

/* Adjust margin for the date section */
.birthdate {
  margin-bottom: 10vh; /* Ensure space between date and button */
}

/* Media query for tablets and above */
@media (min-width: 768px) {
  h1 {
      font-size: 2.5rem; /* Font size for tablets and above */
  }

  .countdown-box {
      padding: 20px;
      width: 100px;
  }

  .countdown-box span {
      font-size: 2.5rem;
  }

  .countdown-box small {
      font-size: 1rem;
  }

  .birthdate {
      font-size: 1rem;
  }

  a {
      font-size: 1rem;
  }

  .btn {
      padding: 0.5em 1em; /* Adjust padding for larger screens */
      font-size: 1rem; /* Adjust font size for larger screens */
  }
}

/* Media query for smaller screens (phones) */
@media (max-width: 767px) {
  .countdown-container {
    flex-direction: row; /* Ensure horizontal layout on small screens */
    gap: 1vw; /* Reduce gap for smaller screens */
    overflow-x: auto; /* Allow horizontal scrolling */
    padding: 10px; /* Optional: Add padding to prevent squishing */
  }

  .countdown-box {
      padding: 2vw; /* Smaller padding for mobile screens */
      width: auto; /* Allow width to be flexible */
      min-width: 70px; /* Adjust minimum width for smaller screens */
  }

  .countdown-box span {
      font-size: 4vw; /* Adjust font size for mobile screens */
  }

  .countdown-box small {
      font-size: 1.5vw; /* Adjust font size for mobile screens */
  }

  .birthdate {
      font-size: 3vw; /* Adjust font size for mobile screens */
  }

  a {
      font-size: 3vw; /* Adjust font size for mobile screens */
  }

  .btn {
      padding: 0.4em 0.8em; /* Smaller padding for mobile screens */
      font-size: 1em; /* Adjust font size for mobile screens */
  }
}

#unmuteButton {
  pointer-events: auto; /* Ensure the button is clickable */
}