a.back-to-top {
  background: url("../images/up_white_arrow.png") no-repeat center center;
  background-color: rgba(var(--rgb-accent), 0.75);
  background-size: 1em;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  padding: 1.5em;
  position: fixed;
  right: 1em;
  bottom: 1em;
  visibility: hidden;
  transition: var(--transition);
}
a.back-to-top:hover {
  background-color: rgba(var(--rgb-accent), 1);
}
body.no-js a.back-to-top,
a.back-to-top.show {
  visibility: visible;
}
@supports (animation-timeline: scroll()) {
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  a.back-to-top {
    visibility: visible;
    animation: fade-in auto linear both;
    animation-timeline: scroll();
    animation-range: 100px 300px;
  }
}