<main>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae ut quasi fugiat placeat. Cumque nostrum, libero culpa, ipsum odit quas illum aspernatur natus, debitis ut omnis officia nobis dignissimos eos.</p>
</main>

@layer base, open-props, demo;
@import url("https://unpkg.com/open-props/normalize.min.css") layer(open-props);
@import url("https://unpkg.com/open-props/open-props.min.css") layer(open-props);

@layer demo {
  p:first-letter {
    color: hsl(220, 94%, 51%);
    font-weight: bold;
    font-size: 4rem;
  }
}

@layer base {
  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  main {
    width: 50ch;
    max-width: calc(100vw - (2 * var(--size-4)));
  }
}