html, body {
    display: flex;
    height: 100%;
    width: 100%;
    margin:0px;
    padding:0px;
    background-color: black;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 1;
    align-items: center;
    justify-content: center;

  }

.layer_background{
    position:absolute;
    display:flex;
    left:0;
    top:0;
    height: 100%;
    width:100%;
    align-items: center;
    margin:0px;
    background-image: url('https://squarescoreimages.mikematich.ca/common/sparks-background.jpg');
    background-position: top;
    background-repeat: no-repeat;
    z-index:2;
}

.layer_GamesLists{
    position:absolute;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    width:99%;
    height: 99%;
    padding:0;
    margin:0;
    overflow:hidden;
    background-color: transparent;
    color:white;
    z-index:3;
}


.layer_gamesList{
    display:flex;
    align-items: center;
    margin:0px;
    padding:10px;
    flex-direction: column;
    color:white;
}

.layer_Title{
    display:flex;
    width:100%;
    height: 7.5%;
    justify-content:center;
    background-image:url('https://squarescoreimages.mikematich.ca/common/squarescore-logo-white.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size:contain;
    background-color: black;
    cursor: pointer;
    padding:0;
    margin:0;
}

.cnt_GamesLists{
    display:flex;
    flex-direction:column;
    height: calc(100% - 7.5%);
    width:100%;
    overflow:auto;
    
}


.cnt_GameTypeHeading{
    width:100%;
    background-color: transparent;
    font-weight: bold;
    color:white;
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
}


.pu_ScreenOverLay{
    display: flex; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    justify-content: center;
    padding: 0%; 
    margin:0%;
  }

  .pu_Box{
    background-color: black;
    border: 1px solid #888;
    padding:0px;
    border-radius: 15px;
    display:flex;
    align-self: center;
  }

  .pu_BoxContent{
    position:relative;
    height:90%;
    width:100%;
    padding:10px;
    display:flex;
    justify-content: center;
    color:white;
  }

  .cnt-GameList_row{
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content: center;
    align-content: center;
  }

  .cnt-GameList_column{
    width:20%;
    padding:5px;
    margin:10px;
    justify-content:center;
    text-align: center;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 80%;
    cursor: pointer;
  }
  .img_GameLogo{
      width:80%;
     aspect-ratio: 1 / 1;
  }