/* Colors */

button {
  outline: 0;
  border: 0;
  background: none;
  margin: 0.5vw;
  padding: 0.5vh 0.5vw;
  font-family: 'Montserrat', sans-serif;
  font-size: 2vh;
  color: #fff;
  cursor: pointer;
  border-radius: 30px;
  transition: all 1s ease;
}

button.blue {
  position: relative;
  border: 2px solid #22a7f0;
  color: #22a7f0;
}

button.blue.active, button.blue:active, button.blue:hover {
  background: #22a7f0;
  color: #fff;
}

.purple {
  position: relative;
  border: 2px solid #bf55ec;
  color: #bf55ec;
}

.purple.active, .purple:active, .purple:hover {
  background: #bf55ec;
  color: #fff;
}

.pink {
  position: relative;
  border: 2px solid #f62459;
  color: #f62459;
}

.pink.active, .pink:active, .pink:hover {
  background: #f62459;
  color: #fff;
}

.yellow {
  position: relative;
  border: 2px solid #f7ca18;
  color: #f7ca18;
}

.yellow.active, .yellow:active, .yellow:hover {
  background: #f7ca18;
  color: #fff;
}

.green {
  position: relative;
  border: 2px solid #2ecc71;
  color: #2ecc71;
}

.green.active, .green:active, .green:hover {
  background: #2ecc71;
  color: #fff;
}

.orange {
  position: relative;
  border: 2px solid #f89406;
  color: #f89406;
}

.orange.active, .orange:active, .orange:hover {
  background: #f89406;
  color: #fff;
}

.white-button {
  position: relative;
  border: 2px solid #f1f1f1;
  color: #f1f1f1;
}

.white-button.active, .white-button:active, .white-button:hover {
  background: gray;
  color: black;
}