button {
  font-family: "Cantarell", sans-serif;
  color: var(--color-orange);
  font-size: 0.75rem; /* Smaller font for mobile */
  text-transform: uppercase;
  font-weight: 700;
  min-width: 70%; /* Wider on mobile */
  display: block;
  background-color: var(--color-white);
  border-radius: 4px;
  border: solid 1px var(--color-pink);
  margin: auto;
  padding: 14px 18px; /* Larger padding for touch */
  position: center;
  margin-top: 10px;
  cursor: pointer; /* Always show pointer for mobile */
}

button:hover {
  background-color: var(--color-white);
  border: solid 1px var(--color-lighterblack);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
}

button:active {
  border: solid 0px #40e0d0;
}

/* Tablet styles */
@media (min-width: 768px) {
  button {
    font-size: 0.9rem;
    min-width: 85%;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  button {
    font-size: 0.8rem;
    min-width: 100%;
  }
}