body {
  background-color: #bae3ff;
  margin: 0px;
}

.header {
  text-align: center;
  font-size: 40px;
  font-family: Quicksand;
  background: #070066;
  color: #fff;
  margin-bottom: 20px;
  background-image: linear-gradient(to left, #ff6f00, #ffc800 75%);
  	-webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

}

.container {
padding-bottom: 20px;
}

.dogcards {
  width: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 22px;
}

@media only screen and (min-width: 500px) {
  .dogcards {
    grid-template-columns: 1fr 1fr;
  }  
}

@media only screen and (min-width: 850px) {
  .dogcards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 80%;
  box-shadow: 0 4px 5px #578cff;
  border-radius: 20px;
  padding: 18px;
  background-color: #ffecc2;
  
  position: relative;
  top: 0;
  transition: all .1s ease-in;
  font-family: Varela Round;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px orange;
  color: #00136e;
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
}

.card .thumbfilter {
  filter: saturate(140%);
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
}

h2 {
  margin-bottom: 0px;
}