* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  background-image: url(images/89500458-green-dotted-seamless-pattern-background-wallpaper-print-or-swatch.jpg);
}
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-bottom: 30px;
  /* color: #411191; */
  color: #f39233;
  background-image: url(images/water.gif);
  background-repeat: repeat;
  background-size: contain;
  padding: 10px;
  /* font-family: "Lemonada", cursive; */
  font-family: "Bangers", cursive;

  border-radius: 35px;
  border: 2px solid #f39233;
}
h1 {
  font-size: 50px;
  color: #f39233;
  /* font-family: "Bangers", cursive; */
  /* font-family: "Press Start 2P", cursive; */
  /* font-family: "Fredericka the Great", cursive; */
  /* font-family: "Rock Salt", cursive; */
}
.startButton {
  font-size: 30px;
  background-image: url(images/0c53773ae95e34d69e99fcd16fc9cc63.gif);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: end;
  height: 80px;
  padding-top: 50px;
}
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 400px;
  padding: 15px;
  /* background-image: url(images/lily\ 3.png);
  background-size: contain; */
}
.display {
  height: 90px;
  width: 90px;
  /* padding: 30px; */
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-image: url(images/lily\ 3.png);
  background-size: cover;
  font-size: 20px;
  /* font-weight: bold; */
  font-family: "Bangers", cursive;
}
h3 {
  height: 10px;
}
#displayScore,
#displayLives {
  font-size: 30px;
}
.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 10px solid #f39233;
  width: 600px;
  height: 600px;
  background-color: rgb(193, 238, 193);
}

.cell {
  width: 11.112%;
  height: 11.122%;
  background-color: rgb(94, 139, 27);
  /* border: 1px dotted salmon; */
}

.lilyLeave {
  background-image: url("images/lily\ 3.png"), url("images/water.gif");
  /* background-position-y: center; */
  background-size: contain;
  /* background-repeat: no-repeat; */
}
.top-road {
  background-image: url(images/road\ top.png);
  background-color: gray;
  background-size: contain;
  background-position-y: center;
  background-repeat: no-repeat;
  background-color: gray;
}
.bottom-road {
  background-image: url(images/road\ bottom.png);
  background-color: gray;
  background-size: contain;
  background-position-y: center;
  background-repeat: no-repeat;
  background-color: gray;
}
.water {
  background-image: url("images/water.gif");
  background-size: contain;
  background-position: bottom left;
}
.water18 {
  background-image: url("images/water.gif");
  background-size: contain;
  background-position: bottom left;
}
.trunks {
  background-image: url("images/Cross-Section-of-Tree-Trunk.png"),
    url("images/water.gif");
  background-size: contain;
}

.cars {
  background-image: url("images/full-classic-cars\ copy.png"),
    url(images/road\ bottom.png);
  background-size: contain;
  background-position-y: center;
  background-repeat: no-repeat;
  background-color: gray;
}
.cars2 {
  background-image: url("images/full-classic-cars.png"),
    url(images/road\ top.png);
  background-size: contain;
  background-position-y: center;
  background-repeat: no-repeat;
  background-color: gray;
}

.grass {
  background-image: url("images/grass.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
}

.frog {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}

.frogWater {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif"),
    url("images/Cross-Section-of-Tree-Trunk.png"), url("images/water.gif");
  background-size: cover, contain;
  background-repeat: no-repeat, repeat;
}

.frogGrass {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif"),
    url("images/grass.gif");
  background-size: cover, contain;
  background-repeat: no-repeat, repeat;
}
.frogTop {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif"),
    url("images/road\ top.png");
  background-size: cover, contain;
  background-repeat: no-repeat, repeat;
}
.frogBottom {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif"),
    url("images/road\ bottom.png");
  background-size: cover, contain;
  background-repeat: no-repeat, repeat;
}

.crocodile {
  background-image: url("images/crocodile\ gif.gif"), url("images/grass.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
}
.crocodileFrog {
  background-image: url("images/crocodile\ gif.gif"), url("images/grass.gif"),
    url(images/0c53773ae95e34d69e99fcd16fc9cc63.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
}
.frogWins {
  background-image: url("images/0c53773ae95e34d69e99fcd16fc9cc63.gif"),
    url("images/lily\ 3.png"), url("images/water.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}

.cell81 {
  background-image: url("images/keyboard.png"), url(images/grass.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}
.cell80 {
  background-image: url("images/asdw.webp"), url(images/grass.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}
.gameover {
  display: flex;
  display: none;
  z-index: 1;
  background-color: white;
  position: absolute;
  align-items: center;
  width: 470px;
  height: 80px;
  padding: 10px;
}