/*
 * Typography — Marion Masseur
 */

html {
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-family:      var(--font-body);
  font-weight:      var(--font-light);
  font-size:        var(--text-base);
  line-height:      var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color:       var(--color-text-light);
  line-height: var(--leading-tight);
  font-weight: var(--font-thin);
  margin:      0;
}

p {
  font-size:   var(--text-md);
  line-height: var(--leading-loose);
  color:       var(--color-text);
  margin:      0 0 var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

img {
  display:   block;
  max-width: 100%;
  height:    auto;
}