@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap');

:root {
  --soft-red: hsl(7, 99%, 70%);
  --yellow: hsl(51, 100%, 49%);
  --dark-desaturated-cyan: hsl(167, 40%, 24%);
  --dark-blue: hsl(198, 62%, 26%);
  --dark-moderate-cyan: hsl(168, 34%, 41%);
  --very-dark-desaturated-blue: hsl(212, 27%, 19%);
  --very-dark-grayish-blue: hsl(213, 9%, 39%);
  --grayish-blue: hsl(210, 4%, 67%);
}

body {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  position: relative;
}

h1,
h2,
h3,
#contact {
  font-family: 'Fraunces', sans-serif;
  font-weight: bold;
}

h1 {
  font-size: 3rem;
  font-weight: 900;
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}