/* Buttons */
.btn-purple {
    background: var(--color-purple);
    color: var(--color-white);
    font-weight: 600;
    font-size: 1.4rem;
    padding: 2rem 2.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s ease;
    text-decoration: none;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
}

.btn-purple:hover {
    background: transparent;
    color: var(--color-purple);
    border: 2px solid var(--color-purple);
}

.btn-black {
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 2rem 2.5rem;
  cursor: pointer;
  border-radius: 4px;
  transition: .3s ease;
  text-decoration: none;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.btn-black:hover {
  background: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

.btn-white-transparent {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 2rem 2.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: .5s ease all;
  text-decoration: none;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.btn-white-transparent:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-black-transparent {
  background: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
  font-weight: 600;
  font-size: 1.4rem;
  border-radius: 4px;
  padding: 2rem 2.5rem;
  cursor: pointer;
  transition: .5s ease all;
  text-decoration: none;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.btn-black-transparent:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.btn-purple-transparent {
  background: transparent;
  color: var(--color-purple);
  border: 2px solid var(--color-purple);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 2rem 2.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: .5s ease all;
  text-decoration: none;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.btn-purple-transparent:hover {
  background: var(--color-purple);
  color: var(--color-white);
}

.btn-login {
  background: transparent;
  color: var(--color-black);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: .5s ease all;
  text-decoration: none;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.btn-login:hover {
  border-bottom: 2px solid var(--color-black);
}