I divided the screen in 4 parts

```
#left {
position: fixed;
top: 50px;
left: 50px;
height: calc(100vh - 100px);
width: 25%;
cursor: url(img/extra/cursors/left.png), auto;
z-index: 10003;
}

#right {
position: fixed;
top: 50px;
right: 50px;
height: calc(100vh - 100px);
width: 25%;
cursor: url(img/extra/cursors/right.png), auto;
z-index: 10003;
}

#up {
position: fixed;
top: 50px;
left: 50px;
height: 25%;
width: calc(100% - 100px);
cursor: url(img/extra/cursors/up.png), auto;
z-index: 10003;
}

#down {
position: fixed;
bottom: 50px;
left: 50px;
height: 25%;
width: calc(100% - 100px);
cursor: url(img/extra/cursors/down.png), auto;
z-index: 10003;

```

}

When you :hover each part, the cursor will become an arrow and when you click you can surf the page up / left / down / right.

My concern is that I would love to have all the upper part of the screen covered by the #up, all the bottom by the #down, all the left by the #left and all the right by the #right. I would love to avoid the overlap of the divs in the corners of the screen.

Not so easy to explain: have a look at this fiddle: <https://jsfiddle.net/LswbL5qL/>