<h1>My Article with Footnotes</h1>

<p>Lorem ipsum<sup class="footnote" id="footnote-top-1"><a href="#footnote-bottom-1">1</a></sup> dolor sit amet consectetur adipisicing elit. Eos et cum non, libero, molestias, at amet enim quam ad modi nam accusamus excepturi qui minus saepe. Placeat labore asperiores explicabo.</p>
<p>Obcaecati maxime vitae optio, veritatis nesciunt quasi dolor aliquid sapiente adipisci a ea neque. Fugiat, eius repellat doloribus delectus officiis, rerum placeat, quod consectetur facilis cupiditate alias sequi error esse!</p>
<p>Ipsam, doloribus. Debitis delectus illo aliquid, cupiditate laborum aperiam corporis quod. Facilis eligendi recusandae ad at nam ullam, doloribus iste ipsa totam, modi voluptatibus reiciendis aliquam, aliquid repellat delectus voluptatem.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id harum eum cum error fugiat nesciunt nam perspiciatis, at veniam officiis odit nulla est porro voluptates, beatae inventore reiciendis omnis sequi!</p>
<p>Ea officia quam doloribus corrupti natus itaque saepe ex at excepturi ducimus dolorem, impedit sint asperiores fugiat aliquam, delectus aspernatur animi sunt repudiandae voluptatibus ipsum dolore similique, hic illum? Pariatur.</p>
<p>Labore laboriosam mollitia amet voluptatum quia modi magnam repellendus cumque ipsam deserunt doloribus, blanditiis, et aliquam alias vel delectus reprehenderit aperiam fugiat quam tempore consequatur in esse necessitatibus! Explicabo, earum?</p>
<p>Assumenda deleniti quibusdam reprehenderit nihil ratione eaque repellendus, voluptates corrupti provident. Provident sint, praesentium perspiciatis quia nam quas cupiditate vero ipsum. Tempore sunt illo illum rerum, deserunt a maxime impedit.</p>
<p>Distinctio ullam dolores velit quidem ea asperiores doloribus delectus vel quaerat ab temporibus nihil illo accusantium obcaecati voluptatibus, assumenda commodi omnis sequi odit labore maxime facere minima cupiditate autem? Nemo.</p>
<p>Dolore, perspiciatis fugiat sunt illo ab deserunt vitae veniam qui omnis, rem corrupti fugit aliquid laudantium repellendus iste perferendis dolores pariatur magni! Officiis ducimus fugit illo pariatur accusantium, exercitationem sunt.</p>

<hr>

<div id="footnotes" class="footnotes">
  <ol>
    <li id="footnote-bottom-1">Lorem ipsum is Greek. 
      <a href="#footnote-top-1">
        <span class="screen-reader-text">Back to reference</span>
        ↥
        
      </a></li>
  </ol>
</div>

.footnote {
  scroll-margin: 2rem;
}
.footnote:target {
  animation: yellowflash-outline 2s;
}
.footnotes :target {
  animation: yellowflash-bg 2s;
}
@keyframes yellowflash-bg {
  from { background: yellow; }
  to   { background: transparent; }
}
@keyframes yellowflash-outline {
  from { outline: 10px solid yellow; }
  to   { outline: 10px solid transparent; }
}
html {
  scroll-behavior: smooth;
}
















body {
  margin: 2rem;
  font: 18px/1.5 system-ui, sans-serif;
}


.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}