.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;
  background-color: transparent;
  color: var(--clr-light);
  border: 2px solid white;
  padding: 0.5em 1em;
  border-radius: 18px;
  transition: transform 0.5s, box-shadow 0.5s;
}

.form-check:hover {
  transform: translateY(-3px);
  transition: transform 0.5s, box-shadow 0.5s;
}

input[type="radio"] {
  display: none;
}

.form-check-label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;
  border: 2px solid white;
  padding: 0.5em 1em;
  border-radius: 18px;
  color: var(--clr-light);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

#pomodoro:checked + .form-check-label {
  background-color: white;
  color: var(--clr-dark);
}

#shortbreak:checked + .form-check-label {
  background-color: white;
  color: var(--clr-dark);
}

#longbreak:checked + .form-check-label {
  background-color: white;
  color: var(--clr-dark);
}

.btn:hover {
  transform: translateY(-3px);
  background-color: #fff;
  color: black;
}

/* Button size variations (matches timer size setting) */
.btn.btn-small,
.form-check-label.btn-small {
  font-size: 0.85rem;
  padding: 0.4em 0.85em;
  border-width: 1.5px;
}

.btn.btn-medium,
.form-check-label.btn-medium {
  font-size: 1rem;
  padding: 0.5em 1em;
  border-width: 2px;
}

.btn.btn-large,
.form-check-label.btn-large {
  font-size: 1.15rem;
  padding: 0.6em 1.15em;
  border-width: 2.5px;
}

/*xxs screens */

@media (max-width: 360px) {
  .btn,
  .form-check-label {
    padding: 0.55em 1em;
    font-size: 0.85rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/*xs screens */

@media (max-width: 475px) {
  .btn,
  .form-check-label {
    padding: 0.6em 1.2em;
    font-size: 0.9rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/*sm screens */

@media (max-width: 640px) {
  .btn,
  .form-check-label {
    padding: 0.55em 1.1em;
    font-size: 0.95rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/*md screens */

@media (max-width: 768px) {
  .btn,
  .form-check-label {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/*lg screens */

@media (max-width: 1024px) {
}

/*xl screens */

@media (max-width: 1280px) {
}

/*2xl screens */

@media (max-width: 1536px) {
}

#banner {
  text-align: center;
  background-color: #000;
}