Prevent page-scrolling, and (attempt to) vertically middle-align the arrow

I changed the direction element to fixed position with 100% height minus a margin-top so that it covers exactly the full page minus the space for the instructions text.  In addition to removing the 100% height on body/html, this removes vertical scrolling on the page (at least for typical desktop browser window sizes).

I also tried to vertically middle-align the arrows using position absolute with a reverse margin-top.  This doesn't fully succeed, as the arrows are all different visible heights.  I suppose having a different margin-top for each of the different arrow directions would work, but... that seems like overkill.