@font-face {
  font-family: heading;
  src: url(../images/vast-shadow/VastShadow-Regular.ttf);
}
#container1 {
  display: grid;
  grid-template-areas: "add add add add add add add add add add add add" "nav nav  nav nav nav nav nav nav nav nav nav nav" "header header header header header header header header header header header header" "aside aside aside aside main main main main section section section section" "puppy puppy puppy puppy why why why why pet pet pet pet" "footer footer footer footer footer footer footer footer footer footer footer footer";
  width: 95%;
  margin: 10px auto;
}

nav {
  grid-area: nav;
  background-color: rgb(186, 204, 218);
  padding: 20px;
  text-align: center;
  top: 10px;
  position: sticky;
}
nav img[alt~=logo] {
  float: left;
  height: 50px;
  width: auto;
}
nav li {
  display: inline;
  list-style-type: none;
  margin-right: 1.5em;
}
nav li a {
  color: black;
}
nav .active {
  background-color: rgb(0, 160, 199);
  padding: 10px;
}

header {
  grid-area: header;
  background-image: url("../images/paw4.png");
  padding: 100px;
  background-size: cover;
  margin-top: 7px;
  text-align: center;
  padding-bottom: 10px;
  font-family: "heading", Courier, monospace;
}

aside {
  grid-area: aside;
  margin: 1.5px auto;
}
aside img[alt~=White-Dog] {
  display: block;
  width: 50%;
  width: 200px;
  height: auto;
  margin: 0.5em auto;
  border-radius: 50%;
}

main {
  grid-area: main;
  margin: 1.5px auto;
}
main img[alt~=Training] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  width: 200px;
  height: auto;
  margin: 0.5em auto;
}

section {
  grid-area: section;
  margin: 1.5px auto;
}
section img[alt~=SnowDog] {
  display: block;
  width: 50%;
  width: 200px;
  height: auto;
  margin: 0.5em auto;
  border-radius: 50%;
}

h3 {
  text-align: center;
}

div {
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 5px;
}

div > p {
  line-height: 32px;
}

main > div {
  background-color: rgb(74, 157, 91);
  padding: 5px 12px 65px;
}

section > div {
  background-color: rgb(255, 200, 71);
  padding: 5px 12px 190px;
}

aside > div {
  background-color: rgb(255, 200, 71);
  padding: 5px 12px;
}

.puppy {
  grid-area: puppy;
}
.puppy img[alt~=cats] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
  margin: 0.5em auto;
}

.why {
  grid-area: why;
}
.why img[alt~=puppyInGrass] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
  margin: 0.5em auto;
  border-radius: 50%;
}

.why > div {
  padding-bottom: 345px;
}

.pet {
  grid-area: pet;
}
.pet img[alt~=dog] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
  margin: 0.5em auto;
}

footer {
  grid-area: footer;
  background-color: rgb(186, 204, 218);
  padding: 20px;
  text-align: center;
  float: left;
}
footer img[alt~=logo] {
  float: right;
  height: 50px;
  width: auto;
}
footer img[alt~=Facebook] {
  float: left;
  padding-right: 0.5em;
  height: 50px;
  width: auto;
}
footer img[alt~=youtube] {
  float: left;
  height: 50px;
  width: auto;
}

#add {
  position: relative;
  display: block;
}

#close {
  position: absolute;
  top: 0;
  right: 0;
}

#add {
  background-color: rgb(0, 160, 199);
  padding: 25px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 3;
  animation-name: addvertisement, fadein;
  animation-duration: 1s;
  animation-delay: 0;
  animation-iteration-count: 1, 1;
  animation-timing-function: ease-out, linear;
}

img[alt~=puppies] {
  padding-right: 0.5em;
  height: 250px;
  width: auto;
}

@keyframes addvertisement {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.75);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 900px) {
  #container1 {
    display: grid;
    grid-template-areas: "add" "nav" "header" "aside" "main" "section" "puppy" "why" "pet" "footer";
    width: 100%;
  }
  #add {
    position: relative;
    display: block;
  }
  #close {
    position: absolute;
    top: 0;
    right: 0;
  }
  #add {
    background-color: rgb(0, 160, 199);
    padding: 25px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 25%;
    z-index: 3;
    animation-name: addvertisement, fadein;
    animation-duration: 1s;
    animation-delay: 0;
    animation-iteration-count: 1, 1;
    animation-timing-function: ease-out, linear;
  }
  img[alt~=puppies] {
    padding-right: 0.5em;
    height: 90px;
    width: auto;
  }
}/*# sourceMappingURL=Services.css.map */