#gameBoard{
    position:  absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 1050px;
    height: 900px;
    
    
}
.title{
    text-align: center;
    left:50%;
    top:20%;
    font-size: 100px;
    transform:translate(-50%,-50%);
    font-family: "Comic Sans MS";
    position: absolute;
    z-index: 3;
    line-height: 0;
    
    
    color:white;
    text-shadow: 0 0 4px black, 0 0 5px black;

    
}
#Winner{
    z-index: -1;
}
.button{
    width:250px;
    height:100px;
    top:70%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
    z-index: 3;
  
    border: 2px solid black;
    font-size: 50px;
    text-align: center;
    font-family: "Comic Sans MS";
    line-height: 0;
    border-radius: 12px;
    
}
.button:hover{
    background-color: grey;
    color:white;
}
#playAgain{
    font-size:35px;
    z-index: -1;
}

.screen{
    background-color: grey;
    opacity: 50%;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 1050px;
    height: 900px;
    position:absolute;
    margin: auto;
    z-index: 2;

}

/* game board lines*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(6,auto);
    grid-template-columns: repeat(7,auto);
    background-color: null;
    position:absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 1050px;
    height: 900px;
    margin: auto;
    z-index: 1;
  }
  

.cell{
    border: 2px solid black;
    width: 160;
    height:160;
    z-index: 1;
}
img {
    position: absolute;
}