<main id="top">
  <section>
    <h1>Scroll to the bottom for button reveal</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Nam quid possumus facere melius?</a> Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. <i>Cyrenaici quidem non recusant;</i> Si autem id non concedatur, non continuo vita beata tollitur. <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> </p>

    <h2>Quando enim Socrates</h2>

    <p>Utilitatis causa amicitia est quaesita. <b>Quod quidem nobis non saepe contingit.</b> Inde sermone vario sex illa a Dipylo stadia confecimus. Quando enim Socrates, qui parens philosophiae iure dici potest, quicquam tale fecit? Illi enim inter se dissentiunt. An tu me de L. <i>Quae cum essent dicta, discessimus.</i> </p>

    <blockquote cite="http://loripsum.net">
      Tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit.
    </blockquote>

    <h2>Quando enim Socrates</h2>
    <blockquote cite="http://loripsum.net">
      Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros.
    </blockquote>
    <ol>
      <li>Quae contraria sunt his, malane?</li>
      <li>Quod autem in homine praestantissimum atque optimum est, id deseruit.</li>
      <li>Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo;</li>
      <li>Quid autem habent admirationis, cum prope accesseris?</li>
    </ol>
    <div class="cta">
      <h3>There could've been something awesome here</h3>
    </div>

    <p>Quam nemo umquam voluptatem appellavit, appellat; <b>Sed fortuna fortis;</b> Mihi enim satis est, ipsis non satis. Quam tu ponis in verbis, ego positam in re putabam. Estne, quaeso, inquam, sitienti in bibendo voluptas? Videamus animi partes, quarum est conspectus illustrior; Quae animi affectio suum cuique tribuens atque hanc, quam dico. Tum ego: Non mehercule, inquam, soleo temere contra Stoicos, non quo illis admodum assentiar, sed pudore impedior; </p>

    <h2>This is another title</h2>
    <div class="cta">
      <h3>There could've been something awesome here</h3>
    </div>
    <p>Videamus animi partes, quarum est conspectus illustrior; Quae animi affectio suum cuique tribuens atque hanc, quam dico. Tum ego: Non mehercule, inquam, soleo temere contra Stoicos, non quo illis admodum assentiar, sed pudore impedior; </p>
    <h2>This is another title</h2>
    <div class="cta">
      <h3>There could've been something awesome here</h3>
    </div>
  </section>
  <a href="#top" class="scroll-to-top" aria-label="scroll to top">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.5" stroke="currentColor" class="icon">
      <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
    </svg>

  </a>
</main>

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@500&display=swap");

.scroll-to-top {
  @supports (animation-timeline: view()) {
    animation: revealScroller ease-out;
    animation-timeline: scroll(root);
  }
}

@keyframes revealScroller {
  0%,
  30% {
    opacity: 0;
    transform: translateY(100%);
  }
  38%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Demo styles */
/* General styles of scroll to top, set them aside to make demo more clear */
.scroll-to-top {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  color: #222;
  background: #f2cd5d;
  border-radius: 50%;
}

section {
  background: #fff;
  max-width: 800px;
  margin: 30px auto;
  padding: 40px;
  border-radius: 10px;
}

h1,
h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}

blockquote {
  margin-block: 0;
  padding: 20px;
  border-top: 6px solid #ccc;
  border-bottom: 6px solid #ccc;
  background: #fafafa;
  font-size: 1.2rem;
  font-style: italic;
}

ol:has(+ .cta) .cta {
  margin-top: 0;
}

.cta {
  background: #d741a7;
  color: #fff;
  border-radius: 6px;
  margin: 40px 0;
  padding: 20px;
  text-align: center;
}

svg {
  width: 30px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #3a1772;
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

html {
  scroll-behavior: smooth;
}