Fade in effect on document ready doesn't work

The fade effect being used in the showed Jquery doesn't work, why?

$(function() {
  $(document).ready(function() {
    $('.Game').fadeIn(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <h1 class="Game">Darkness Island</h1>
  <h2>Available soon</h2>
  <button class="Download">Download</button>
  <button class="Details">See details</button>
</div>

What is wrong ?

Solution

Add display: none; on "Game" div to start with.

Also keep the script tag at the end of html

 $(document).ready(function () {
      $('.Game').fadeIn(500);
   });

And most impportantly, include jquery in the head tag.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="text">
    <h1 class="Game" style="display: none;">Darkness Island</h1>
    <h2>Available soon</h2>
    <button class="Download">Download</button>
    <button class="Details">See details</button>
</div>
<script>
  $(document).ready(function () {
$('.Game').fadeIn(500);
  });
</script>