* {
  box-sizing: border-box;

}

body {
  background: black;
  height: 900px;
  margin: 0;
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  color: white;
}

h1 {
  font-size: 60px;
}

.button-score-lives-wrapper{
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-lives-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}


#start {
  height: 40%;
  font-family: 'Press Start 2P', cursive;
  border: 2px solid white;
  color: white;
  border-radius: 8px;
  background: none ;
  padding: 5px 15px;
}


.grid-wrapper {
  background: black;
  border: solid 10px rgb(94, 94, 94);
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  border: 10px solid rgb(94, 94, 94);
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  height: 600px;
  width: 600px;
}

.game-over {
  background: black;
  background-image: url(./game-over.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.grid div {
  border: none;
  height: 10%;
  width: 10%;
}



.road {
  background: url(./road.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.grass { 
  background-image: url(./grass.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.car {
  background-image: url(./car.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.lorry-front {
  background: url(./lorry-front.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.lorry-back {
  background: url(./lorry-back.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.log1 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log2 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log3 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log4 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log5 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log6 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log7 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.log8 {
  background: url(./log.png);
  background-repeat: no-repeat;
  background-size: cover;
}


.river1 {
  background: url(./river.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.river2 {
  background: #0341fc;
}
.river3 {
  background: #0341fc;
}
.river4 {
  background: url(./river.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.river5 {
  background: #0341fc;
}
.river6 {
  background: #0341fc;
}
.river7 {
  background: url(./river.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.river8 {
  background: #0341fc;
}
.river9 {
  background: #0341fc;
}
.river10 {
  background: url(./river.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.river11 {
  background: #0341fc;
}
.river12 {
  background: #0341fc;
}
.river-still {
  background: #0341fc;
}

.lily-pad {
  background: url(./lily-pad.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.frog {
  background: url(./frog.png);
  background-repeat: no-repeat;
  background-size: cover;
}