#top{color:blue
	}
	
#middle{color:orange
	}
	
#bottom{color:#F1F909
	}

body{background-color:#00C2FF;
	}	
	
h1{margin-left:13px; 
	color:blue
	}	

#fishy {width:200px
	}

#doggy {width:60px
	}	
	
#zomb {width:400px
	}	
	
#woof{font-size:3em
	}
	
#simpson {width:200px
	}
	
	
#bob {color:blue}
	
	
#bobby {color:blue}
	
	
	body {
	animation-name: backgroundColorPalette;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 
	/* linear is enabled default, it’s not necessary to add it make it work but it can make your code more expressive */
}

@keyframes backgroundColorPalette {
	0% {
		background: #ee6055;
	}
	25% {
		background: #60d394;
	}
	50% {
		background: #aaf683;
	}
	75% {
		background: #ffd97d;
	}
	100% {
		background: #ff9b85;
	}
}

	

	
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

canvas {
  display: block;
  margin: 1rem auto 0 ;
  padding: 0;
  width: 75%;
  border: 2px solid black;
  background-color: rgb(68, 154, 235);
  -o-object-fit: contain;
  object-fit: contain;
}

.display{
  display: flex;
  justify-content: space-between;
}

.game-score {
  max-width: 500px;
  margin: 1rem auto 0px;
  font-size: 20px;
}
.game-score>span{
  padding-right: 1rem;
}

#score {
  font-weight: bold;
  color: purple;
  font-size: 18px;
}

#lives {
  color: red;
  font-weight: bold;
  font-size: 18px;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 500px;
  margin: 1rem auto 0;
}

button {
  padding: 0.5rem 1rem;
  font-weight: bold;
  background-color: rgb(26, 26, 26);
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
  border: 2px solid white;
  cursor: pointer;
}
.mobile-btns {
  display: none;
  margin: 1rem auto 0;
  max-width: 200px;
  text-align: center;
}

.mobile-btns span {
  color: #fff;
  background-color: rgb(26, 26, 26);
  font-weight: bold;
  padding: 12px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.top-btn {
  margin: 10px auto 30px;
}
.mid-btn {
  display: flex;
  justify-content: space-between;
}
.btm-btn {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .mobile-btns {
    display: block;
  }
}