<main>
  <button popovertoggletarget="my-first-pop-up" class="button fab ripple">
    <svg viewBox="0 0 512 512" title="comment-alt">
      <path d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" />
    </svg>
  </button>
  <div id="my-first-pop-up" popover>Pop-up content!</div>
  <header>
    <h1>Awesome Website</h1>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi
      laborum obcaecati doloremque facilis ipsum tempora, necessitatibus
      maiores voluptates! Dolore sunt perferendis quod alias iusto aut eaque
      atque nisi pariatur cumque?
    </p>
    <p>
      Iste hic vitae neque maxime quo eum natus aliquid non perferendis
      magni quis aliquam quam eveniet laudantium officia possimus ipsa
      aspernatur molestiae rerum, quibusdam voluptatibus ullam architecto!
      Commodi, nisi maiores?
    </p>
    <p>
      Eligendi mollitia labore sint asperiores quia tempore suscipit
      repellendus, facilis reiciendis rem veritatis placeat quibusdam optio
      unde odio voluptatem sapiente error rerum? Tempora delectus recusandae
      consequatur, perferendis eum nostrum doloremque.
    </p>
    <p>
      Vitae inventore in eaque numquam consectetur iure illum voluptatem
      enim hic possimus tempore quisquam sequi culpa maiores beatae
      voluptate iusto impedit quam delectus at facere, ducimus vero?
      Explicabo, eius sit.
    </p>
    <p>
      Officia ut illo facere suscipit ad temporibus in nihil autem eius
      expedita reiciendis fugit, maxime est repellat minima ratione nulla
      eveniet iure. Voluptas quae illo vero tenetur libero, maiores quaerat!
    </p>
    <p>
      Cum velit magni voluptas, officia sed esse illum libero molestias
      praesentium hic reiciendis laborum autem corporis et. Deleniti
      accusamus nesciunt facilis, distinctio explicabo consequatur nobis
      tempora amet magnam aperiam officia?
    </p>
    <p>
      Nulla nobis et, officiis alias, accusantium tempore ut a,
      necessitatibus laborum magnam voluptatem illum iusto voluptates sed
      atque labore sequi dicta. Alias sunt, corrupti veritatis delectus iste
      eos obcaecati incidunt?
    </p>
    <p>
      Maxime quam sequi at odio. Nesciunt maiores repudiandae dolorem dicta,
      pariatur cum, laborum quasi aspernatur aperiam natus eveniet nemo
      laboriosam doloribus, ab sunt expedita voluptates dolor assumenda.
      Enim, fugiat culpa!
    </p>
    <p>
      Sint soluta, perspiciatis, itaque a quia quis expedita laudantium
      porro amet, quo deleniti. In cumque, iste consequatur maxime ab nulla
      facilis accusamus placeat? Consequuntur libero, quis quod iure
      voluptatibus assumenda.
    </p>
    <p>
      Doloremque qui sit suscipit modi consequatur laudantium ipsam possimus
      deleniti recusandae voluptatibus veritatis numquam odio sint
      laboriosam at alias animi similique delectus corrupti atque officiis,
      quidem consequuntur tempora? Tempore, facilis.
    </p>
  </article>
</main>

@layer demo {
  [popover] {
    padding: var(--size-4);
  }
  [popover]:open::backdrop {
    background: hsl(0 0% 10% / 0.5);
    backdrop-filter: blur(2px);
  }
}

@layer base {
  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }
  body {
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  article {
    padding-bottom: var(--size-4);
  }

  h1 {
    margin: 0;
  }

  article {
    margin: 0 var(--size-4);
    padding-bottom: var(--size-4);
  }

  article > p + p {
    margin-top: var(--size-4);
  }

  main > header {
    margin-bottom: var(--size-4);
    max-width: 100vw;
    grid-template-columns: 1fr;
  }

  main {
    max-width: var(--size-content-3);
  }

  header {
    min-height: var(--size-content-1);
    background: var(--surface-2);
    display: grid;
    padding: var(--size-4);
    place-items: center;
    width: 100vw;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    min-height: 50vmin;
    max-height: 500px;
  }

  h1 {
    position: sticky;
    top: 0;
  }
}

@layer button {
  .button.fab {
    position: fixed;
    z-index: 99999;
    bottom: var(--size-4);
    right: var(--size-4);
  }

  .fab svg {
    fill: var(--md-sys-color-on-primary-container);
  }
}