<div class="container">
  <h1>Use <code>:root</code> for Flexible Type</h1>
  <h2>Resize this Window <span role="img" aria-label="beaming face with smiling eyes">😄</span></h2>
  <p>Now that you've set the <code>:root</code> pseudo-class to calculate <code>font-size</code> based on <a href="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/">viewport height and width</a>, the body will utilize the root <code>em</code> that's based on the value calculated by <code>:root</code>. <em>Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?</em></p>
  <p>Sugar plum cake apple pie sweet fruitcake lemon drops gingerbread. Tart icing topping apple pie chupa chups jelly-o chupa chups ice cream. Jelly-o pie chocolate bar lollipop donut.</p>
  <p>Powder tiramisu dessert. Chocolate cake marzipan topping. Biscuit croissant gummi bears topping gingerbread cotton candy bonbon cupcake cake.</p>
  <p>Chocolate carrot cake jelly dragée. Sugar plum candy canes tiramisu. Chocolate marshmallow tootsie roll cake cake. Sweet gingerbread pudding lollipop tootsie roll pastry.</p>
</div>

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

body {
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.container {
  padding: 0 1em
}

@media screen and (max-width: 45em) {
  p {
    font-size: 1.5em;
  }
}















/* general styling */
code,
pre {
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 3px;
}

code {
  white-space: nowrap;
}

em {
  background-color: #ffeb3b;
  font-style: normal;
  padding: .1em .2em;
}

// Demo example for https://github.com/AllThingsSmitty/css-protips#use-root-for-flexible-type