body {
  display: grid;
  grid-template-columns: auto 0px; 
}

.top {
  --offset: 50px; 
  
  position: sticky;
  bottom: 20px;      
  margin-right:20px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #ffffffb2;
  border-radius: 100px;
  white-space: nowrap;
 
  /* ... */
  animation: progress linear;
  animation-timeline: scroll();
}

.top svg {
  width: 20px;
  height: 17px;
  position: relative;
  top: 2px;
  fill: #244282;
}



a:hover svg {
  top: 0px;
}


@media (min-width: 1150px) { 
  .top {
    background: #f5f6fb;
    right: calc(50% - 1000px / 2 - 61px);
    border: 2px solid #e4eaf7;
    border-radius: 50px;
  }
  .top svg {
    fill: #244282;
  } 
}



p {
  font-size: 25px;
}

/* remove the below if you don't want smooth scrolling */
html,
body {
  scroll-behavior: smooth;
}