<main>
  <h1>Top of the page</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, tempore libero. Eum expedita quos quod dolore ut molestias harum est, minima debitis facilis similique placeat non, iste in. Consequatur, aliquam.</p>
  <p>Molestias sed iure iste voluptas laborum voluptate ipsam at totam eaque, vel ab unde temporibus, non ducimus earum quo itaque fugiat cumque neque obcaecati. Temporibus doloribus distinctio quidem dignissimos placeat.</p>
  <p>Minus, mollitia. Ut, nobis odit adipisci deserunt blanditiis voluptate fugiat reiciendis accusantium omnis tenetur ab molestias praesentium suscipit quod commodi numquam! Repellat iusto incidunt qui nemo non consequatur quam reiciendis!</p>
  <p>Quam, neque assumenda optio aspernatur voluptas officia beatae molestiae corporis ipsum enim laboriosam hic, deleniti incidunt inventore rem recusandae perferendis exercitationem nihil ab quis maiores nemo? Quisquam qui sequi et!</p>
  <p>Alias beatae, eum dicta obcaecati aliquam nobis rem omnis nulla doloribus reprehenderit quaerat corporis consectetur illum ullam et ipsam aliquid, quis pariatur totam distinctio doloremque quam molestiae iusto. Consectetur, possimus?</p>
  <p>Tempora cumque provident animi consectetur, amet ducimus! Incidunt maiores nobis voluptas nostrum voluptatem sunt itaque sequi placeat, qui porro sint quisquam illo consectetur! Doloremque, nulla nobis illum eum iusto repellendus?</p>
  <p>Temporibus nihil itaque eveniet, beatae repellendus distinctio. Sunt numquam odit excepturi quis, nihil aliquid architecto veritatis nam dolorum placeat ratione dolorem? Reiciendis a distinctio, ipsa assumenda neque minus mollitia consequuntur.</p>
  <p>Autem incidunt nihil ipsa ipsum eum culpa placeat inventore! Dignissimos, fuga explicabo magnam dolore distinctio animi aut, culpa consectetur corporis alias quae mollitia assumenda inventore consequuntur odio cupiditate placeat sint!</p>
  <p>A debitis aliquam, recusandae id amet illum alias explicabo quidem harum laborum, odio rerum quos in suscipit blanditiis aspernatur, delectus iure mollitia temporibus! Quisquam corporis cum dolorum neque voluptas dicta.</p>
  <p>Consequatur ut temporibus mollitia numquam itaque aperiam veniam, perspiciatis sunt dignissimos voluptatum alias distinctio nam nemo quae porro, ipsam tenetur nisi. Aliquid adipisci voluptatem atque illum vel magnam consequatur exercitationem!</p>
  <p>Deserunt sunt, quidem consequatur repellat modi officia quaerat laboriosam animi voluptates itaque vero harum officiis similique amet atque quibusdam eos et, voluptatum beatae repudiandae quia quae? In ex id laborum!</p>
  <p>Nulla nam temporibus esse odit, voluptate optio exercitationem repudiandae aliquid dolores nobis, magnam ad porro sint nisi fugiat soluta tempore ab magni ipsa atque quae repellendus. Beatae provident iusto ipsum?</p>
  <p>Praesentium optio deserunt perspiciatis animi magni reiciendis, assumenda molestias nostrum beatae architecto voluptatem suscipit at non quidem doloribus nobis laudantium fugit autem est, iusto nam asperiores corporis quasi excepturi. Impedit?</p>
  <p>Tempore odio fuga a voluptatum quod aut, sint cum saepe nisi sapiente assumenda. Exercitationem quo nostrum vero eum et, in velit quaerat labore dolore obcaecati eius molestias libero vitae similique.</p>
  <p>Natus, cum ipsum iste quis voluptas molestiae quae eius doloribus, unde iure porro doloremque quos nobis eligendi architecto, eaque hic voluptatem fuga sunt. Consequuntur optio doloremque ab commodi, laborum obcaecati?</p>
  <p>Deserunt cum, facere unde, qui eius obcaecati a in excepturi illum ipsam porro iste cumque nesciunt non ipsum nulla dolorum inventore, et perspiciatis! Iste repudiandae quidem omnis ullam consectetur molestias?</p>
  <p>Molestiae, deserunt illum! Quisquam aliquid nisi veniam possimus ab id ad, ipsam, sit libero exercitationem nemo corporis repudiandae dolores impedit eligendi reiciendis quidem accusantium asperiores aliquam praesentium, voluptatem odit! Dolor.</p>
  <p>Ullam rem alias doloremque tempore cumque a nulla praesentium, animi quas beatae optio dicta corrupti reiciendis, velit, vero ipsa debitis repellat earum soluta doloribus. Rerum dolores quas aliquid eligendi dolore.</p>
  <p>Necessitatibus eaque dicta impedit? Veritatis dicta voluptatem, dolor consequatur quo inventore laboriosam laborum eum omnis ipsum minus voluptatum modi similique saepe exercitationem ipsa, culpa itaque corrupti iusto eligendi. Ipsam, non?</p>
  <p>Aut in modi voluptatem porro, natus quas laborum corporis, unde dignissimos harum deserunt velit impedit quisquam minima id nesciunt ab, assumenda dolorum voluptatibus numquam veniam ea quia! Nihil, mollitia excepturi?</p>
</main>

<aside>
  <div>
    <button class="show-dialog-button">Show Dialog</button>
  </div>
</aside>

<dialog id="dialog">
  <div class="dialog-title">
    Hi, I'm a dialog.
  </div>
  <button aria-label="Close Dialog" class="close-dialog-button">
    <svg viewBox="0 0 512 512" width="15">
      <path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z" />
    </svg>
  </button>
</dialog>

body {
  max-inline-size: 80ch;
  margin-inline: auto;
  margin-block: 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 20ch;
  gap: 1rem;
  font: 100%/1.8 system-ui;
  @media (max-width: 500px) {
    grid-template-columns: 1fr;
  }
}

aside {
  > div {
    position: sticky;
    top: 1rem;
  }
  @media (max-width: 500px) {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    padding: 0.5rem;
  }
}

dialog {
  /*   position: relative; */
  padding: 2rem;
  text-align: center;

  .close-dialog-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: 0;
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  }
}

const showDialogButton = document.querySelector(".show-dialog-button");
const closeDialogButton = document.querySelector(".close-dialog-button");
const dialog = document.querySelector("dialog");

showDialogButton.addEventListener("click", () => {
  dialog.showModal();
});

closeDialogButton.addEventListener("click", () => {
  dialog.close();
});