.button {
  font: var(--short);
  font-weight: 700;
  padding: 8px 15px;
  letter-spacing: 0.6px;
  border: 2px solid currentColor;
  transition: .3s ease-in-out;
}

.button--big {
  font: var(--petit);
  font-weight: 700;
  padding: 16px 35px;
  border-width: 4px;
  border-radius: 4px;
}

.button:hover {
  background-color: var(--pen);
  border-color: var(--pen);
  color: var(--paper);
}

.button--white:hover,
.button--white:focus {
  background-color: rgba(255, 255, 255, .25);
  border: 4px solid currentColor;
}

.button--green {
  border-color: var(--primary);
  color: var(--primary);
}

.button--green:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}