.button,
.link {
  font-family: "Poppins", "sans-serif";
  border-radius: calc(20rem / 16);
  background-color: var(--primary-accent);
  color: var(--primary-background);
  border: none;
  outline: none;
  transition-duration: 0.3s;
  font-weight: normal;
  text-align: center;
}

.button:hover,
.link:hover {
  background-color: var(--secondary-accent);
  cursor: pointer;
}

.button:focus,
.link:focus {
  box-shadow: 0 0 0 calc(4rem / 16) var(--secondary-accent);
}

.small.button:focus,
.small.link:focus {
  box-shadow: 0 0 0 calc(3rem / 16) var(--secondary-accent);
}

.link {
  text-decoration: none;
}

.small {
  padding: calc(5rem / 16) calc(30rem / 16);
  font-size: calc(14rem / 16);
}

.normal {
  padding: calc(10rem / 16) calc(50rem / 16);
  font-size: calc(18rem / 16);
}