<div class="wrapper">
  <header class="header">
    <h1>CSS Static vs. Relative Units</h1>
  </header>
  <main class="main">
    <section class="pxFont pxLineHeight">
      <h2>Kittens heading px</h2>
      <p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
      <p>These paragraphs are using <strong>font-size: 16px, line-height: 24px</strong></p>
    </section>

    <section class="remFont pxLineHeight">
      <h2>Kittens heading rem</h2>
      <p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
      <p>These paragraphs are using <strong>font-size: 1rem, line-height: 24px</strong></p>
    </section>

    <section class="remFont unitlessLineHeight">
      <h2>Kittens heading rem</h2>
      <p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
      <p>These paragraphs are using <strong>font-size: 1rem, line-height:  1.5</strong></p>
    </section>
  </main>
  <footer class="footer">
    CSS demo for 24 Accessibility 2019: "Pixels vs. Relative Units in CSS Typography: why it’s still a big deal." by Kathleen McMahon.
  </footer>
</div>

// General layout styles

* {
  box-sizing:  border-box;
}

body {
  font-family: Raleway, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background-color: white;
  color: black;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper > * {
  margin: 1rem;
}

.header {
  margin-bottom: 1rem;
}

.main {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.footer {
  margin-top: auto;
}

// using em here to take on border size in relation to 
// section font-size, and work around Chrome rem bug
section {
  font-size: 1rem;
  padding: 1rem;
  border: 0.0625em solid darkmagenta;  
}

h1 {
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.1;
}

h2 {
  font-weight: 700;
}

p {
  margin-top: 1rem;
}

strong {
  font-weight: 700;
  background-color: #ffbcff;
  padding: 0 0.125rem;
}


// Demo-specific layout styles diplaying the
// differences between px vs relative CSS units

.pxFont {
  
  h2 {
    font-size: 32px;
  }
  
  p {
    font-size: 16px;
  } 
  
}

.remFont {
  
  h2 {
    font-size: 2rem;
  }
  
  p {
    font-size: 1rem;
  }
  
}

.pxLineHeight {
  
  h2 {
    line-height: 40px;
  }
  
  p {
    line-height: 24px;
  }
  
}

.remLineHeight {
  
  h2{
    line-height: 1.25rem;
  }
  
  p {
    line-height: 1.5rem;
  }
  
}

.unitlessLineHeight {
  
  h2{
    line-height: 1.25;
  }
  
  p {
    line-height: 1.5;
  }
  
}