.page {
  scrollbar-width: none; /* Hide the scrollbar in Firefox */

  /* 50px alpha fade to give clue to the user that the page is scrollable */
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 1) 50px
  );
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 1) 50px
  );

  pointer-events: auto; /* Allow text selection in faded area */
}

/* Hide the scrollbar in Chrome/Safari/Edge */
.page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media all and (max-width: 490px) {
  .page {
    /* 92px alpha fade to give clue to the user that the page is scrollable on mobile devices, 
      42px is to account for the footer */
    -webkit-mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 42px,
      rgba(0, 0, 0, 1) 92px
    );
    mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 42px,
      rgba(0, 0, 0, 1) 92px
    );
  }
}