body {
    background-color: black;
}

#overlay {
    position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10; 
  background-color: rgba(0,0,0);
  
}

#logo {
    text-align: center;
}

#start {
    font-family: 'Ranchers', cursive;
    color: yellow;
    text-align: center;
    cursor: pointer;
}

#overlay-win {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
   z-index: 2; 
    background-color: rgba(0,0,0);
}

#win, #continue {
    font-family: 'Ranchers', cursive;
    color: yellow;
    text-align: center;
}


#overlay-lose {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0,0,0);
    display: none;
}

#game-over-banner {
    margin: 0 auto;
    width: 500px;
    height: 100px;
    border: 2px solid red;
    background-color: rgb(251,207,0);
    border-radius: 5%;
    overflow: auto;
    
    
}

#game-over {
    color: black;
    font-family: 'Ranchers', cursive;
    font-size: larger;
    text-align: center;
}

.button {
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
}

#replay-button, #home-button {
    background-color: black;
    border-radius: 10%;
}

#replay, #home {
    color: rgb(251,207,0);
    font-family: 'Ranchers', cursive;
}

#display, #score {
    font-family: 'Ranchers', cursive;
    color: yellow;
    text-align: center;
}

/* the main grid that will contain 28 x 28 small grids each grid being 20px by 20px
we do a flex-wrap wrap because we want all the grids to be laid out in different rows
*/

.grid {
    display: flex;
    flex-wrap: wrap;
    height: 560px;
    width: 560px;
    background-color: black;
    margin: 0 auto;
}

/* measurement for each grid */ 
.grid div {
    height: 20px;
    width: 20px;
}

.wall {
    background-color: rgb(16,111,192);
    box-sizing: border-box;
}

.pac-dots {
    box-sizing: border-box;
    background-color: rgb(239, 156, 90) ; 
    border-radius: 50%;
    border: 7px solid black
}

.power-pellets {
    box-sizing: border-box;
    background-color: rgb(242, 153, 93); 
    border: 5px solid black
}

.pacman {
    background-color: yellow;
    box-sizing: border-box;
    border-radius: 50%;
    position: relative;
}

.mouth {
    background: black;
    position: absolute;
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
}

.ghost {
    border: 0;
    box-sizing: border-box;
    background-color: red;
    border-radius: 100% 100% 0 0;
  height: 10px;
  width: 10px;    
}
  
.blueGhost {
    border: 0;
    box-sizing: border-box;
    background-color: blue;
    border-radius: 100% 100% 0 0;
  height: 10px;
  width: 10px;
}