<main>
  <h1>Dialog Demo</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto recusandae amet, rerum quasi quaerat ipsum nam earum vitae distinctio deleniti. Rerum earum excepturi ab, totam tenetur fuga praesentium illum repudiandae.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto recusandae amet, rerum quasi quaerat ipsum nam earum vitae distinctio deleniti. Rerum earum excepturi ab, totam tenetur fuga praesentium illum repudiandae.</p>
  
  
  <!-- Dialog Button -->
  <button onclick="window.dialog.showModal();">
    Open Dialog
  </button>
</main>

<!-- Dialog Popup -->
<dialog id="dialog" class="">
  <h2>Hello.</h2>
  <p>I'm a dialog element that is open.</p>
  <p>The rest of the page is inert while I'm open - try clicking anywhere else on the page to test.</p>
  <button onclick="window.dialog.close();" aria-label="close" class="x">❌</button>
</dialog>

* {
	margin: 0;
	padding: 0;
}

dialog {
  padding: 1rem 3rem;
  background: var(--coral);
  max-width: 64ch;
  margin: 2rem auto;
}

.x {
  filter: grayscale(1);
  border: none;
  background: none;
  position: absolute;
  top: 0;
  right: 0.4rem;
}

body {
  background-color: var(--blue);
  font-family: system-ui, serif;
  line-height: 1.5;
  padding-bottom: 2rem;
}

main {
  max-width: 500px;
  margin: 2rem auto;
  display: grid;
}

button {
  padding: 0.5rem;
  font-size: 1rem;
  background: var(--coral);
  border: 2px solid;
  border-radius: 0.5rem;
  justify-self: end;
}

dialog::backdrop {
 background: rgba(0,0,0,0.5);
}