.timer {
  font-family: "Space Grotesk", sans-serif;
  color: var(--clr-light);
  font-size: 8.5rem;
  font-weight: 600;
  letter-spacing: -0.25rem;
  font-variant-numeric: tabular-nums;
  transition: font-size 0.3s ease;
}

/* Timer size variations */
.timer.timer-small {
  font-size: 6rem;
}

.timer.timer-medium {
  font-size: 8.5rem;
}

.timer.timer-large {
  font-size: 11rem;
}

.hero {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 1rem;
}

.form-check {
  display: inline-flex;
}

/* Button containers for proper spacing */
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.start {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Mobile Responsive Styles */

@media (max-width: 360px) {
  .hero {
    padding: 10px;
    gap: 0.5rem;
  }

  #container {
    gap: 0.5rem;
  }

  .start {
    gap: 0.5rem;
    width: 100%;
  }

  .start .btn {
    flex: 1;
    min-width: 110px;
  }
}

@media (max-width: 475px) {
  .hero {
    padding: 15px 10px;
    gap: 0.75rem;
  }

  #container {
    gap: 0.6rem;
  }

  .start {
    gap: 0.6rem;
    width: 100%;
  }

  .start .btn {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 18px 15px;
  }

  #container {
    gap: 0.7rem;
  }

  .start {
    gap: 0.7rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 20px;
  }
}