@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("./animations.css");

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--clr-dark);
}

.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 500;
  border: none;
}

.c-btn[variant="primary"] {
  color: white;
  background-color: var(--clr-primary);
  transition: background-color 0.3s ease-out;
}
.c-btn[variant="primary"]:hover {
  background-color: var(--clr-primary-hover);
}
.c-btn[variant="primary"]:active {
  background-color: var(--clr-primary-active);
}

.c-btn[variant="secondary"] {
  color: white;
  background-color: var(--clr-secondary);
  transition: background-color 0.3s ease-out;
}
.c-btn[variant="secondary"]:hover {
  background-color: var(--clr-secondary-hover);
}
.c-btn[variant="secondary"]:active {
  background-color: var(--clr-secondary-active);
}

.c-btn[variant="secondary-border"] {
  color: white;
  outline: 2px solid transparent;
  outline-offset: -2px;
  background-color: var(--clr-secondary);
  transition: background-color 0.3s ease-out, outline-color 0.3s ease-out,
    color 0.3s ease-out;
}
.c-btn[variant="secondary-border"]:hover {
  color: var(--clr-secondary);
  outline-color: var(--clr-secondary);
  background-color: transparent;
}

.c-btn[variant="light"] {
  color: var(--clr-secondary);
  background-color: transparent;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.c-btn[variant="light"]:hover {
  color: white;
  background-color: var(--clr-secondary);
}
.c-btn[variant="light"]:active {
  color: white;
  background-color: var(--clr-secondary-active);
}