@import url(./tip-calculator.css);

:root {
  font-size: 1rem;
  --red: hsl(14, 100%, 66%);
  --strong-cyan: hsl(172, 67%, 45%);
  --very-dark-cyan: hsl(183, 100%, 15%);
  --dark-grayish-cyan: hsl(186, 14%, 43%);
  --grayish-cyan: hsl(184, 14%, 56%);
  --light-grayish-cyan: hsl(185, 41%, 84%);
  --very-light-grayish-cyan: hsl(189, 41%, 97%);
  --white: hsl(0, 0%, 100%);

  --font-base: 1rem;
  --font-extra-large: 2rem;
  --font-large: 1.5rem;
  --font-medium: 1.25rem;
  --font-small: 0.875rem;

  --padding: 0.7rem;

  --font-family: 'Space Mono', monospace;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--light-grayish-cyan);
  font-family: var(--font-family);
}

input,
button {
  font-family: var(--font-family);
}

.attribution {
  font-size: 11px;
  text-align: center;

  padding: 4rem 2rem;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}