main.css

body {
  background-color: lightblue;
  font-family: monospace;
}

h1 {
  text-align: center;
}

#animals {
  display: flex;
  flex-flow: row wrap;
}


.animals-card {
  text-align: center;
  justify-content: space-evenly;
  align-content: center;
  float: left;
  width: 200px;
  padding: 14px 16px;
  text-align: center;

}

.animals-card-h2.Cat{
  margin-bottom: 10px;
  background-color: lightpink;
  font-weight: bold;
}

.animals-card-h2.Dog{
  margin-bottom: 10px;
  background-color: lightsalmon;
  font-weight: bold;
}

.animals-card-h2.Rat{
  margin-bottom: 10px;
  background-color: lightseagreen;
  font-weight: bold;
}

.animals-card-footer.Cat{
  margin-bottom: 10px;
  background-color: lightpink;
}

.animals-card-footer.Dog{
  margin-bottom: 10px;
  background-color: lightsalmon;
}

.animals-card-footer.Rat{
  margin-bottom: 10px;
  background-color: lightseagreen;
}

.animals-card h4 {
  margin-bottom: 10px;
}

.animals-card p {
  margin-bottom: 10px;
}

.buttonContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#catButton {
  background-color: lightpink;
  align-content: center;
}

#dogButton {
  background-color: lightsalmon;
}

#ratButton {
  background-color: lightseagreen;
}