/* 1. Import Google Fonts (Poppins) for a modern look */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

/* 2. Reset and base styles for all elements */
* {
  margin: 0; /* 2.1 Remove default margin */
  padding: 0; /* 2.2 Remove default padding */
  box-sizing: border-box; /* 2.3 Use border-box for predictable sizing */
  font-family: "Poppins", sans-serif; /* 2.4 Set base font */
}

/* 3. Body styling: center content and set background */
body {
  background-color: #141414; /* 3.1 Netflix's dark background */
  color: #fff; /* 3.2 White text for contrast */
  font-size: 16px; /* 3.3 Base font size */
  line-height: 1.6; /* 3.4 Improve readability */
  width: 100%;
  min-height: 100vh; /* 3.5 Full viewport height */
  display: flex; /* 3.6 Center content vertically and horizontally */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

/* 4. Main heading styling */
h1 {
  font-size: 48px; /* 4.1 Large heading */
  color: #e50914; /* 4.2 Netflix's signature red */
  margin-bottom: 40px; /* 4.3 Space below heading */
  letter-spacing: 2px; /* 4.4 Spacing between letters */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 4.5 Subtle shadow for depth */
}

/* 5. Countdown container styling */
.countdown {
  display: flex; /* 5.1 Arrange timers in a row */
  flex-wrap: wrap; /* 5.2 Wrap on small screens */
  justify-content: center;
  align-items: center;
  gap: 20px; /* 5.3 Space between timers */
  padding: 40px 30px; /* 5.4 Padding around timers */
  border-radius: 15px; /* 5.5 Rounded corners */
  backdrop-filter: blur(10px); /* 5.6 Glassmorphism effect */
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* 5.7 Semi-transparent background */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* 5.8 Soft shadow */
  border: 1px solid rgba(255, 255, 255, 0.18); /* 5.9 Subtle border */
}

/* 6. Individual timer block styling */
.timer {
  background-color: #e50914; /* 6.1 Red background for timer */
  color: #fff; /* 6.2 White text */
  padding: 30px; /* 6.3 Space inside timer */
  font-size: 24px; /* 6.4 Base font size for timer */
  border-radius: 10px; /* 6.5 Rounded corners */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100px; /* 6.6 Minimum width for consistency */
  max-width: 160px; /* 6.7 Maximum width */
  transition: all 0.3s ease-in-out; /* 6.8 Smooth hover transition */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 6.9 Subtle shadow */
}

/* 7. Time value styling inside timer */
.timer .time {
  font-size: 48px; /* 7.1 Large number for time */
  font-weight: 700; /* 7.2 Bold for emphasis */
  margin-bottom: 5px; /* 7.3 Space below number */
}

/* 8. Label styling inside timer */
.timer .label {
  font-size: 14px; /* 8.1 Smaller label text */
  font-weight: 700;
  text-transform: uppercase; /* 8.2 Uppercase for clarity */
  letter-spacing: 2px; /* 8.3 Spacing for readability */
  text-shadow: 1px 1px #000; /* 8.4 Subtle shadow for contrast */
}

/* 9. Timer hover effect for interactivity */
.timer:hover {
  background-color: #b1070e; /* 9.1 Darker red on hover */
  transform: translateY(-5px) scale(1.05); /* 9.2 Slight lift and scale */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* 9.3 Stronger shadow */
}

/* 10. Responsive design: tablets and below */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 32px; /* 10.1 Smaller heading */
    margin-bottom: 20px;
  }
  .countdown {
    padding: 20px; /* 10.2 Less padding */
  }
  .timer {
    padding: 20px; /* 10.3 Smaller timer blocks */
  }
  .timer .time {
    font-size: 36px; /* 10.4 Smaller time numbers */
  }
  .timer .label {
    font-size: 12px; /* 10.5 Smaller labels */
  }
}

/* 11. Responsive design: mobile phones */
@media screen and (max-width: 480px) {
  h1 {
    font-size: 24px; /* 11.1 Even smaller heading */
  }
  .countdown {
    flex-direction: column; /* 11.2 Stack timers vertically */
    width: 90%;
  }
  .timer {
    min-width: 80%;
    max-width: 100%;
    margin: 10px 0; /* 11.3 Space between stacked timers */
  }
}