body {
    background-image: url(media/bg3.png);
    background-size: cover;
}

.navbar {
    position:sticky;
    top: 0; 
    width: 100%;
    display: flex;
    padding: 3px;
    background-color: #470f341f;
    z-index: 1000;
  }
  
  .navbar a {
  float: right;
  color: #eee7e7;
  text-align: center;
  padding: 12px 17px;
  text-decoration: none;
  font-size: 25px;
 }
  
  
  .navbar a:hover {
  background-color: #720660;
  border-radius: 5px;
}

h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: cornsilk;
    font-size: 200%;
    font-family: 'Bunch Blossoms Personal Use', sans-serif;
}

h3{
    color: blanchedalmond;
    text-align: center;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    width: 560px;
    height: 560px;
    border: 5px solid #fff;
    margin: auto;
    
}
  
.grid div {
    width: 20px;
    height: 20px;
}

button{
    border: none;
    outline: none;
    height: 40px;
    width: 15vw;
    background: rgb(238, 217, 217);
    color: rgb(255, 255, 255);
    font-size: 25px;
    font-family: "Comfortaa", cursive;
    border-radius: 50px;   
    margin-left: 84vh;
    font-weight: 900;
}

.pac-dot {
    background-color: green;   
    border: 5px solid white;
    box-sizing: border-box;
}

.wall {
    background-color: rgba(248, 118, 216, 0);
}

.power-pellet {
    background-color: rgb(4, 252, 86);
    border-radius: 10px;
}

.G1{
    background-color: red;
}

.G2 {
    background-color: pink;
}

.G3 {
    background-color: rgb(136, 10, 10);
}

.G4 {
    background-color: orange;     
}

.pac-man {
    background-color: #fdd017;
    border-radius: 10px;
}

.scared-ghost {
    background-color: aquamarine;
}