@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
  
body {
  background-color: #f1f1fa;
  color: #224;
  font-family: 'Crimson Pro', serif;
  font-size: 1.5rem;
  font-weight: 400;
}

h1 {
  font-synthesis: none;
  font-family: "Hepta Slab", serif;
  font-size: 3rem;
}
h2 {
  font-synthesis: none;
  font-family: "Hepta Slab", serif;
  font-weight: 300;
  font-size: 2rem;
}
strong {
  font-synthesis: none;
  font-weight: 650;
}
em {
  font-synthesis: none;
  font-variation-settings: "ital" 1;
  font-weight: 450;
}

.content-container {
  margin: 2rem auto;
  max-width: 98vw;
}
  @media (min-width: 45em) {
    .content-container {
      max-width: 40rem; 
    }
  }
  @media (min-width: 55em) {
    .content-container {
      max-width: 42rem; 
    }
  }
  @media (min-width: 65em) {
    .content-container {
      max-width: 46rem; 
    }
  }