* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background-image: url('../assets/jungle2.png');
   background-size: cover;
   font-family: 'Gotu', sans-serif;
   font-weight: 400;
}

.main-menu {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  display: fixed;
}

.main-menu .parchment {
  background-image: url('../assets/parchment.png');
  background-size: contain;
  height: 400px;
  width: 800px;
  margin: 0 auto;
  /* margin: 0 auto; */
}
.main-menu .logo {
  margin-top: 20px;
  width: 70%;
}

.main-menu p {
  margin: 2px;
}

.main-menu .main-gem {
  width: 10%;
  margin: 10px 0 -20px 0
}

.main-menu .main-fire {
  width: 5%;
  margin: 0 auto;
}

.main-menu .main-ruby {
  width: 6%;
  margin: 0 auto;
}

.main-menu button {
  margin: 20px;
  height: 50px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0px 0px 25px black;
  font-size: 15px;
  background: rgb(161, 139, 110);
  border: 2px solid rgb(78, 68, 54);
  color: white;
}

.main-menu button:hover {
  background-color: rgb(105, 89, 68);
  cursor: pointer;
}

.controls-wrapper {
  height: 9vh;
  display: none;
  text-align: center;
  justify-content: center;
  margin: 10px;
}

.controls-wrapper p {
  font-size: 20px;
  font-weight: 500;
  margin-right: 15px;
}

 .scale {
  transform: scale(1.3);
}


.grid-wrapper {
  height: 90vh;
  display: none;
  justify-content: center;
}

.grid {
  align-items: center;
  box-shadow: 0 0 100px 0 rgb(24, 24, 24);
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  height: 600px;
  width: 600px;
  background-image: url('../assets/backdrop.jpg');
   background-size: contain;
}

.grid div {
  /* border: 1px solid lightgrey; */
  flex-grow: 1;
  height: 5%;
  width: 5%;
  font-size: 12px;
  color: red;
}

.grid p {
  filter: opacity(0.4);
  transition: all 2s;
}

.grid div.pika {
  background-image: url('../assets/pika-sprite.png');
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.walls {
  background-image: url('../assets/testTile.png'); 
  background-size: contain;
}

/* .pacman {
  background-image: url('/assets/indi.png');
   background-size: contain;
} */

.fruit {
   background-image: url('../assets/gem.png'); 
   background-size: contain;
}

.bigFruit {
  background-image: url('../assets/ruby.png'); 
  background-size: contain;
}

.grid .largePointText {
  font-size: 17px;
  font-weight: 800;
  color: blue;
}

.greenGhost {
  background-image: url('../assets/greenSnake.png');
   background-size: contain;
}

.redGhost {
  background-image: url('../assets/redSnake.png');
   background-size: contain;
}

.yellowGhost {
  background-image: url('../assets/brownSnake.png');
   background-size: contain;
}

.pinkGhost {
  background-image: url('../assets/pinkSnake.png');
   background-size: contain;
}

.scaredGhost {
  background-image: url('../assets/scaredSnake.png');
   background-size: contain;
}

.eatenGhost {
  background-image: url('../assets/death.png');
  background-size: contain;
}

.trapOne, .trapTwo, .trapThree {
  background-image: url('../assets/trapOneTest.png');
  background-size: contain;
}

.fire {
  background-image: url('../assets/fire.png');
  background-size: contain;
}

.trapDoor {
  background-image: url('../assets/secretDoor.png');
  background-size: contain;
}

.hole {
  background-image: url('../assets/hole.png');
  background-size: contain;
}

.gameOver {
  background-image: url('../assets/parchment.png');
  background-size: contain;
  height: 400px;
  width: 800px;
  margin: 150px auto;
  text-align: center;
  display: none;
  /* margin: 0 auto; */
}

.gameOver img {
  width: 15%;
  margin: -10px;
  padding: 10px;
}

.gameOver h2 {
  padding: 50px;
  /* background-color: red; */
  margin: 0 0 -20px 0
}
.gameOver h3 {
  margin: 0;
}

.gameOver button {
  margin: 20px;
  height: 50px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0px 0px 25px black;
  font-size: 15px;
  background: rgb(161, 139, 110);
  border: 2px solid rgb(78, 68, 54);
  color: white;
}

.gameOver button:hover {
  background-color: rgb(105, 89, 68);
  cursor: pointer;
}

.gameWon {
  background-image: url('../assets/parchment.png');
  background-size: contain;
  height: 400px;
  width: 800px;
  margin: 150px auto;
  text-align: center;
  display: none;
  /* margin: 0 auto; */
}

.gameWon img {
  width: 15%;
  margin: -10px;
  padding: 10px;
}

.gameWon h2 {
  padding: 50px;
  /* background-color: red; */
  margin: 0 0 -20px 0
}
.gameWon h3 {
  margin: 0;
}

.gameWon button {
  margin: 20px;
  height: 50px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0px 0px 25px black;
  font-size: 15px;
  background: rgb(161, 139, 110);
  border: 2px solid rgb(78, 68, 54);
  color: white;
}

.gameWon button:hover {
  background-color: rgb(105, 89, 68);
  cursor: pointer;
}