CSS popup not applying to rest of page – Facebook api

I have this css popup that once you click 10 times it pops up and then says wow. The idea is that they only have 10 clicks. The popup is made to make everything behind it opaque. The issue Im having is that it is only applying to the top and not the rest. Any help would be much appreciated. To see it in action click here

CSS

@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: black;
  min-height: 100%;
  font-family: "Arial", sans-serif;
}

.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}

.game {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 500px;
          perspective: 500px;
  min-height: 100%;
  height: 100%;
}

@-webkit-keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  100% {
    background: white;
  }
}

@keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  100% {
    background: white;
  }
}
.card {
  float: left;
  width: 16.66666%;
  height: 22%;
  padding: 5px;
  text-align: center;
  display: block;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 00;
  -webkit-tap-highlight-color: transparent;
}
.card1 {
  float: left;
  width: 16.66666%;
  height: 24%;
  padding: 5px;
  padding-top: 20px;
  text-align: center;
  display: block;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 0;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 800px) {
  .card {
    width: 25%;
    height: 16.666%;
  }
}
.card .inside {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  background: white;
}
.card .inside.picked, .card .inside.matched {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card .inside.matched {
  -webkit-animation: 1s matchAnim ease-in-out;
          animation: 1s matchAnim ease-in-out;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.card .front, .card .back {
  border: 1px solid black;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
}
.card .front img, .card .back img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  max-height: 100%;
}
.card .front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
@media (max-width: 800px) {
  .card .front {
    padding: 5px;
  }
}
@media (max-width: 800px) {
  .card .back {
    padding: 10px;
  }
}

.modal-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  display: none;
  position: relative;
  width: 500px;
  height: 400px;
  max-height: 90%;
  max-width: 90%;
  min-height: 380px;
  margin: 0 auto;
  background: white;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 30px 10px;
}
.modal .winner {
  font-size: 80px;
  text-align: center;
  font-family: "Anton", sans-serif;
  color: #4d4d4d;
  text-shadow: 0px 3px 0 black;
}
@media (max-width: 480px) {
  .modal .winner {
    font-size: 60px;
  }
}
.modal .restart {
  font-family: "Anton", sans-serif;
  margin: 30px auto;
  padding: 20px 30px;
  display: block;
  font-size: 30px;
  border: none;
  background: #4d4d4d;
  background: -webkit-linear-gradient(#4d4d4d, #222);
  background: linear-gradient(#4d4d4d, #222);
  border: 1px solid #222;
  border-radius: 5px;
  color: white;
  text-shadow: 0px 1px 0 black;
  cursor: pointer;
}
.modal .restart:hover {
  background: -webkit-linear-gradient(#222, black);
  background: linear-gradient(#222, black);
}
.modal .message {
  text-align: center;
}
.modal .message a {
  text-decoration: none;
  color: #28afe6;
  font-weight: bold;
}
.modal .message a:hover {
  color: #56c0eb;
  border-bottom: 1px dotted #56c0eb;
}
.modal .share-text {
  text-align: center;
  margin: 10px auto;
}
.modal .social {
  margin: 20px auto;
  text-align: center;
}
.modal .social li {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-right: 10px;
}
.modal .social li:last-child {
  margin-right: 0;
}
.modal .social li a {
  display: block;
  line-height: 50px;
  font-size: 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.modal .social li a.facebook {
  background: #3b5998;
}
.modal .social li a.facebook:hover {
  background: #4c70ba;
}
.modal .social li a.google {
  background: #D34836;
}
.modal .social li a.google:hover {
  background: #dc6e60;
}
.modal .social li a.twitter {
  background: #4099FF;
}
.modal .social li a.twitter:hover {
  background: #73b4ff;
}

footer {
  height: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 0;
}
footer .disclaimer {
  line-height: 20px;
  font-size: 12px;
  color: #727272;
  text-align: center;
}
@media (max-width: 767px) {
  footer .disclaimer {
    font-size: 8px;
  }
}

HTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Memory Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Anton'>

      <link rel="stylesheet" href="css/style.css">

<script>
  function reload() {
    location.reload();
}
var number = 10;

document.onclick = function() {
  number--;
  if (number > -1) {
    document.getElementById("clicks").innerHTML = number;
    (number == 0) && (location.hash = '#popup1')
  }
};

</script>
<style>
.card4 {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 50px;
  margin: 1rem;
  position: inherit;
  width: 100px;
  z-index: 5; !important
}
.card-4 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.overlay1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay1:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 99; !important
}


.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 0px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
  z-index: 99; !important
}
</style>  
</head>
<br /><br />
<center>
<div class="card4 card-4">
<p class="noselect"> Tries to go: <span id="clicks">10</span></p>
 </center>
<div id="popup1" class="overlay1">
    <div class="popup">
        <h2>WOW!</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
      <p class="noselect"><center>Lets see how you did!!</center></p>
        </div>
    </div>

</div>
<div class="wrap">
<div class="game"></div>

    <div class="modal-overlay">
        <div class="modal">
            <h2 class="winner">You Rock!</h2>
            <button class="restart">Play Again?</button>
            <p class="message">Developed on <a href="https://codepen.io">CodePen</a> by <a href="https://codepen.io/natewiley">Nate Wiley</a></p>
            <p class="share-text">Share it?</p>
            <ul class="social">
                <li><a target="_blank" class="twitter" href="https://twitter.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
                <li><a target="_blank" class="facebook" href="https://www.facebook.com/sharer.php?u=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
                <li><a target="_blank" class="google" href="https://plus.google.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
            </ul>
        </div>
    </div>
    </div>
  <center><br />
  <button onclick="reload()">Reload page</button>
  </center>
    <footer>
        <p class="disclaimer">All logos are property of their respective owners, No Copyright infringement intended.</p>
    </footer>
  </div><!-- End Wrap -->


  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Javascript

// Memory Game
// © 2014 Nate Wiley
// License -- MIT
// best in full screen, works on phones/tablets (min height for game is 500px..) enjoy ;)
// Follow me on Codepen

(function(){

    var Memory = {

        init: function(cards){
            this.$game = $(".game");
            this.$modal = $(".modal");
            this.$overlay = $(".modal-overlay");
            this.$restartButton = $("button.restart");
            this.cardsArray = $.merge(cards, cards);
            this.shuffleCards(this.cardsArray);
            this.setup();
        },

        shuffleCards: function(cardsArray){
            this.$cards = $(this.shuffle(this.cardsArray));
        },

        setup: function(){
            this.html = this.buildHTML();
            this.$game.html(this.html);
            this.$memoryCards = $(".card");
            this.binding();
            this.paused = false;
        this.guess = null;
        },

        binding: function(){
            this.$memoryCards.on("click", this.cardClicked);
            this.$restartButton.on("click", $.proxy(this.reset, this));
        },
        // kinda messy but hey
        cardClicked: function(){
            var _ = Memory;
            var $card = $(this);
            if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
                $card.find(".inside").addClass("picked");
                if(!_.guess){
                    _.guess = $(this).attr("data-id");
                } else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
                    // $(".picked").addClass("matched");
                    _.guess = null;
                } else {
                    _.guess = null;
                    _.paused = true;
                    setTimeout(function(){
            // to keep cards over change to matched or just delete
                        $(".picked").removeClass("");
            // changed false to true
                        Memory.paused = false;
                    }, 600);
                }
                if($(".matched").length == $(".card").length){
                    _.win();
                }
            }
        },

        win: function(){
            this.paused = true;
            setTimeout(function(){
                Memory.showModal();
                Memory.$game.fadeOut();
            }, 1000);
        },

        showModal: function(){
            this.$overlay.show();
            this.$modal.fadeIn("slow");
        },

        hideModal: function(){
            this.$overlay.hide();
            this.$modal.hide();
        },

        reset: function(){
            this.hideModal();
            this.shuffleCards(this.cardsArray);
            this.setup();
            this.$game.show("slow");
        },

        // Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
        shuffle: function(array){
            var counter = array.length, temp, index;
        // While there are elements in the array
        while (counter > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * counter);
            // Decrease counter by 1
            counter--;
            // And swap the last element with it
            temp = array[counter];
            array[counter] = array[index];
            array[index] = temp;
            }
            return array;
        },

        buildHTML: function(){
            var frag = '';
            this.$cards.each(function(k, v){
                frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">
                <div class="front"><img src="'+ v.img +'"
                alt="'+ v.name +'" /></div>
                <div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"
                alt="Codepen" /></div></div>
                </div>';
            });
            return frag;
        }
    };

    var cards = [
        {
            name: "horse",
            img: "http://img.izismile.com/img/img2/20091105/animals_white_background_12.jpg",
            id: 1,
        },
        {
            name: "dog",
            img: "http://ontariospca.ca/templates/ospca/images/bg-dog-image.png",
            id: 2
        },
        {
            name: "big thing",
            img: "http://www.worldanimalfoundation.net/i/bison.jpg",
            id: 3
        },
        {
            name: "polar bear",
            img: "http://image.fg-a.com/animals/polar-bear.jpg",
            id: 4
        }, 
        {
            name: "turtle",
            img: "http://15858-presscdn-0-65.pagely.netdna-cdn.com/wp-content/uploads/sites/default/files/images/Turtle.jpg",
            id: 5
        },
        {
            name: "Toucan",
            img: "https://upload.wikimedia.org/wikipedia/commons/4/44/Keel-billed_Toucan-27527.jpg",
            id: 6
        },
        {
            name: "Turkey",
            img: "https://i0.wp.com/freepngimages.com/wp-content/uploads/2016/12/turkey-transparent-background-image.png?fit=624%2C509",
            id: 7
        },
        {
            name: "rat",
            img: "http://www.dictie.ro/wp-content/uploads/2015/05/cartoon-mouse-and-cheese-04.jpg",
            id: 8
        },
        {
            name: "tiger",
            img: "https://i.ytimg.com/vi/qXD058okIkA/maxresdefault.jpg",
            id: 9
        },
        {
            name: "wolf",
            img: "https://s-media-cache-ak0.pinimg.com/736x/f6/39/f3/f639f31e38d404d402e55afd720fbe17.jpg",
            id: 10
        },
        {
            name: "teddy bear",
            img: "http://downloadclipart.org/do-upload/clipart/2015-12/Animal_Clipart_Pictures.png",
            id: 11
        },
        {
            name: "snake",
            img: "http://legacy.citybeat.com/cincinnati/imgs/media.images/19366/wwe.widea.jpg",
            id: 12
        },
    ];

    Memory.init(cards);


})();

Codepen.io pen here