@import url("../foundations/colors.css");
@import url("../foundations/typography.css");

.button_L {
  text-align: center;
  padding: 1.25rem;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primary);
  cursor: pointer;
}

.button_M {
  text-align: center;
  padding: 0 24px;
  height: 40px;
  font-weight: 700;
  font-size: 0.8rem;
  /*   text-transform: uppercase; */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primary);
  cursor: pointer;
}

.primary-button {
  background-color: var(--turquoise);
  color: white;
}
.secondary-button {
  color: var(--turquoise);
  border: solid 1px var(--turquoise);
}
.primary-button span {
  margin: 0.25rem 0.5rem 0 0;
}
.primary-button:hover {
  transition: 1s;
  background-color: var(--turquoise-darken);
}
.secondary-button:hover {
  transition: 1s;
  color: var(--turquoise-darken);
  border: solid 1px var(--turquoise-darken);
  background-color: var(--turquoise-light);
}