body {
  background-color:#181A25;
  display: flex;
  justify-content: center;
}

.grid {
  z-index: -2;
  background-size: contain;
  display: flex;
  flex-wrap: wrap;
  width: 560px;
  height: 560px;
}

.grid div {
  width: 20px;
  height: 20px;
}

.blinky {
  background-image: url('images/blinky.png');
  z-index: +2;
}

.pinky {
  background-image: url('images/pinky.png');
  z-index: +2;
}

.inky {
  background-image: url('images/inky.png');
  z-index: +2;
}

.clyde {
  background-image: url('images/clyde.png');   
  z-index: +2; 
}

.pac-man-left {
  background-image: url('images/pacman.png');  
  border-radius: 10px;
  transform: rotate(180deg);
}

.pac-man-right {
  background-image: url('images/pacman.png');  
  border-radius: 10px;
}

.pac-man-up {
  background-image: url('images/pacman.png');  
  border-radius: 10px;
  transform: rotate(270deg);
}

.pac-man-down {
  background-image: url('images/pacman.png');  
  border-radius: 10px;
  transform: rotate(90deg);
}

.scared-ghost {
  background-image: url('images/scared-ghost.png');
}

.container {
  margin-top: -5px;
}

h3 {
  font-family: 'IBM Plex Mono', monospace;
  color: #DDF9C1;
  text-align: center;
  font-size: 20px;
}

h4 {
  font-family: 'IBM Plex Mono', monospace;
  color: #DDF9C1;
  text-align: center;
  font-size: 15px; 
  line-height: 50%;
}

#start-button {
  height: 25px;
  width: 80px;
  background-color: red;
  font-family: 'IBM Plex Mono', monospace;
  color: #DDF9C1;
  text-align: center;
  margin-left: 240px;
  margin-top:10px;
}

.wall {
  background-color: blue;
}

.pac-dot {
  font-size: 40px;
  color: white;
  margin: 0px;
  text-align: center;
  line-height: 0px;
}

.power-pellet {
  background-image: radial-gradient(white 55%, transparent 5%);
  z-index: -1;
}