/**
* This sets the global style to black text on a white background.
*/
:root {
  color: #000;
  background: #fff;
}

/**
* Reset button styles to essentially no styling.
* That way, the styling we define below is all we will see.
*/
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

/**
* A button component -- styles for anything we want to look like abutton
*/
.btn {
  /* These are default for <button>, but needed for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* Create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* An invisible border that will be colored on hover */
  border: solid 2px transparent;
  border-radius: 0.4em;

  /* The button size comes from text + padding */
  padding: 0.5em 1em;

  /* Make sure colors have enough contrast! */
  color: #fff;
  background-color: #9555af;
}

/* Old-school "push button" effect on click + color tweak */
.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

/* Swap colors on mouse-over */
.btn:hover {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}