/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  .back-to-top-link {
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
    line-height: 3rem;
    text-align: center;
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 50%;
    background-color: #814497;
    padding: 0.25rem;
    border: 2px solid white;
  }

  /* How far of a scroll travel within <main> prior to the  link appearing */

.back-to-top-wrapper {
  /* uncomment to visualize "track" */
  /* outline: 1px solid red; */
  position: absolute;
  top: 100vh;
  right: 0.25rem;
  /*  Optional, extends the final link into the footer at the bottom of the page set to `0` to stop at the end of `main` */
  bottom: 0em;
  /* Required for best support in browsers not supporting `sticky` */
  width: 3em;
  /* Disable interaction with this element */
  pointer-events: none;
}

main {
    /*  leave room for the "scroll track" */
    /* padding: 0 3rem; */
    /* required to make sure the `absolute` positioning of the anchor wrapper is indeed `relative` to this element vs. the body */
    position: relative;
  }

.back-to-top-link {
    /*  `fixed` is fallback when `sticky` not supported */
    position: fixed;
    /* preferred positioning, requires prefixing for most support, and not supported on Safari @link https://caniuse.com/#search=position%3A%20sticky */
    position: sticky;
    /* reinstate clicks */
    pointer-events: all;
    /* achieves desired positioning within the viewport relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used */
    top: calc(100vh - 5rem);
}

.back-to-top-wrapper a:before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-right: 2px solid white;
    border-top: 2px solid white;
    bottom: 12px;
    right: 17px;
    transform: rotate(-45deg);
}

.back-to-top-wrapper a{
    font-size: 0px;
}