<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>

:root {
    --coral: hsl(300, 100%, 93%);
    --coral--b: hsl(280, 100%, 70%);
    --blue: hsl(200, 100%, 90%);
    --blue--b: hsl(200, 100%, 80%);
    --green: hsl(113, 85%, 95%);
    --green--b: hsl(84, 71%, 53%);
    --yellow: hsl(30, 100%, 93%);
    --yellow--b: hsl(40, 100%, 80%);
    --page-padding: 1rem;
}
* {
	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;
}