.btn {
  cursor: pointer;
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;

  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;

  border: none;
  border-radius: 255px;

  transition: 0.3s;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn.circle{
  width: 40px;
  height: 40px;
}
.btn.default {
  padding: 0 1.5rem;
  height: 40px;
}

.btn.big {
  font-size: 19px;
  padding: 0 2rem;
  height: 64px;
}
@media (max-width: 450px){
  .btn.default {
    font-size: 15px;
    padding: 0 1.25rem;
    height: 36px;
  }
  .btn.big {
    font-size: 17px;
    padding: 0 1.5rem;
    height: 56px;
  }
}
@media (max-width: 380px){
  .btn.default {
    font-size: 14px;
    padding: 0 1rem;
  }
  .btn.big {
    font-size: 15px;
    padding: 0 1.25rem;
  } 
}
.btn.outline-black {
  background: transparent;
  border: 1px solid var(--black);
  color: var(--black);
}

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

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

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

.btn.yellow {
  background: var(--yellow);
  color: var(--black);
}

.btn.green {
  background: var(--green);
  color: var(--white);
}