:root {
  --color-light: #beeef7;
  --color-medium: #6fc2d0;
  --color-dark: #373a6d;
  --color-accent: #ff8246;
}

h1, h2, h3, h4 {
  font-weight: 500;
}

button {
  border: 0;
  padding: 0;
  font: inherit;
  display: block;
}

.button {
  display: inline-block;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background-color: var(--color-medium);
  padding: 12px 16px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  white-space: nowrap;
  border: 0;
}

.button:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}

.button:active {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}