html, body {
  margin: 0;
  padding: 0;
  cursor: none;
}

h2 {
  text-align: center;
  font-size: 32px;
  margin: 0 0 25px;
  font-weight: normal;
}

#quadrant {
  position: fixed;
  border: 1px dashed red;
  box-sizing: border-box;
}
.top    { height: 40%; top:    0; }
.bottom { height: 60%; bottom: 0; }
.left   { width:  35%; left:   0; }
.right  { width:  65%; right:  0; }

.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: blue;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}