.navtop-wrapper {
  background-color: transparent;
  display: grid;
  justify-content: right;
  width: 90% !important;
  left: 4%;
  height: 80px;
  position: fixed;
  bottom: 3% !important;
  z-index: 9999;
}
.navtop-wrapper button.scroll-top {
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  scale: 0;
  background: hsl(from var(--bg-panel) h s 25%) url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><path class="st0" d="M11,23V7.8l-5.6,5.6L4,12l8-8l8,8l-1.4,1.4L13,7.8V23H11z"/></svg>') center center no-repeat;
  background-size: 1.5rem;
  opacity: 0;
}
@media (min-width: 768px) {
  .navtop-wrapper button.scroll-top {
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range-start: 400px;
    animation-range-end: 600px;
  }
}

button.scroll-top {
  background-color: var(--bg-panel);
}
button.scroll-top::before {
  content: "scrolla upp";
  font-size: 0.8rem;
  font-variant: small-caps;
  margin-top: -4rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
}

a button {
  background-color: var(--primary);
}

@keyframes fadebanner {
  from {
    bottom: -8rem;
  }
  to {
    bottom: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}