* {
  box-sizing: border-box;
}

.btn {
  background-color: hsl(0, 0%, 90%);
  border: 1px solid hsl(0, 0%, 70%);
  outline: none;
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 0.3em;
}

.btn:hover,
.btn:focus {
  background-color: hsl(0, 0%, 80%);
  box-shadow: 0 0 5px 0 hsl(0, 0%, 70%);
}

.btn.btn-primary {
  background-color: hsl(271, 70%, 50%);
  border-color: hsl(271, 70%, 30%);
  color: white;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: hsl(271, 70%, 40%);
  box-shadow: 0 0 5px 0 hsl(271, 70%, 30%);
}

.btn.btn-accent {
  background-color: hsl(200, 100%, 40%);
  border-color: hsl(200, 100%, 20%);
  color: white;
}

.btn.btn-accent:hover,
.btn.btn-accent:focus {
  background-color: hsl(200, 100%, 30%);
  box-shadow: 0 0 5px 0 hsl(200, 100%, 20%);
}

.btn.btn-danger {
  background-color: hsl(0, 60%, 50%);
  border-color: hsl(0, 60%, 30%);
  color: white;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
  background-color: hsl(0, 60%, 40%);
  box-shadow: 0 0 5px 0 hsl(0, 60%, 30%);
}

.btn.btn-large {
  font-size: 1.25rem;
}

.btn.btn-small {
  font-size: 0.75rem;
}

.btn.btn-pill {
  border-radius: 1000000px;
}

.btn.btn-custom {
  background: linear-gradient(
    to right,
    hsl(271, 70%, 50%),
    hsl(200, 100%, 40%)
  );
  color: white;
  border-color: #222;
}

.btn.btn-custom:hover,
.btn.btn-custom:focus {
  background: linear-gradient(
    to right,
    hsl(271, 70%, 40%),
    hsl(200, 100%, 30%)
  );
  border-color: black;
  box-shadow: 0 0 5px 0 black;
}