How to turn an overlay into a giant button

I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.

Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?

...

<style>
body {
margin: 0;
padding: 0;
}

section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9); 
}

#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}

#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}

</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>

...