button {
  padding: 12px 24px;
  border-radius: 4px;
  font-family: Roboto Slab;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.6px;
  background: var(--yellow);
  color: white;
  border: 2px solid var(--yellow);
  transition-duration: 350ms;
  cursor: pointer;
  outline: none;
}
button:hover {
  color: var(--yellow);
  background-color: transparent;
  border-color: var(--yellow);
  transition-duration: 350ms;
  background: transparent;
}

@media (max-width: 800px) {
  button {
    padding: 8px 16px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.2px;
  }
}

.button-blue {
  color: var(--blue);
  background: transparent;
  border-color: var(--blue);
}
.button-blue:hover {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

.button-yellow {
  color: var(--yellow);
  border-color: var(--yellow);
  background: transparent;
}
.button-yellow:hover {
  color: var(--blue);
  background-color: var(--yellow);
  border-color: var(--yellow);
}

.button-orange {
  color: var(--orange);
  border-color: var(--orange);
  background: transparent;
}
.button-orange:hover {
  color: white;
  background-color: var(--orange);
  border-color: var(--orange);
}


.button-white {
  color: white;
  border-color: white;
  background: transparent;
}
.button-white:hover {
  color: white;
  background-color: var(--blue);
  border-color: var(--blue);
}

/* not used
@keyframes color-change {
  0% { border-color: var(--blue); }
  50% { border-color: var(--dark-blue); }
  100% { border-color: var(--blue); }
}
@keyframes bg-color-change {
  0% { background-color: var(--blue); border-color: var(--blue); }
  50% { background-color: var(--dark-blue); border-color: var(--dark-blue); }
  100% { background-color: var(--blue); border-color: var(--blue); }
}
*/