test.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
body,
html {
  padding: 0;
  margin: 0;
  background-color:rgba(0,0,0,1.00);
	color:rgba(255,255,255,1.00);
  overflow: hidden;
}

body * {
  z-index: 20;
  color: rgba(0,0,0,1.00);
}

#content {
  width: 100%;
  height: 100vh;
}

#light {
  position: absolute;
  width: 500px;
  height: 500px;
  box-shadow: inset 0 0 150px 150px #000;
  background: #fff;
  z-index: 10;
}

.light-off {
  box-shadow: inset 0 0 150px 250px #000 !important;
}

.pogi {
  position: absolute;
  top: 40%;
  left: 45%;
  color: yellow;
}
.pogi2 {
  position: absolute;
  top: 30%;
  left: 30%;
}
.pogi3 {
  position: absolute;
  top: 10%;
  left: 20%;
}
	</style>

	<script type="text/javascript">
//this is a sample flashlight effect

$(document).ready(function() {
  $(this).mousemove(function(e) {
    $("#light").css({
      "top": e.pageY - 250,
      "left": e.pageX - 250
    })
  }).mousedown(function(e) {
    switch (e.which) {
        case 1:
            $("#light").toggleClass("light-off");
            break;
        case 2:
            console.log('Middle Mouse button pressed.');
            break;
        case 3:
            console.log('Right Mouse button pressed.');
            break;
        default:
            console.log('You have a strange Mouse!');
    }
  })
})

//idea
//when the ball is in the light box, turn it color original.
//if it's out of the box, change the color to black.
//to hide the blocks which are upside, make a black big board and cover them.
	</script>
</head>
<body>
	<div id="light"></div>

	<div id="content">
	  <div class="pogi">
	    <h1>POGI AKO</h1>
	  </div>
	  <div class="pogi2">
	    <h1>tTTT</h1>
	  </div>
	  <div class="pogi3">
	    <h1>tTTT</h1>
	  </div>
	</div>
</body>
</html>
