@font-face {
  font-family: heading;
  src: url(../images/vast-shadow/VastShadow-Regular.ttf);
}
#container1 {
  display: grid;
  grid-template-areas: "nav nav  nav nav nav nav nav nav nav nav nav nav" "header header header header header header header header header header header header" "photo1 photo1 aside aside aside aside aside main photo photo photo photo" "values values values values values values Cont Cont Cont Cont Cont Cont" "heading heading heading heading heading heading heading heading heading heading heading heading" "Winston Winston Winston Winston April April April April Martock Martock Martock Martock" "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;
  font-size: 50px;
  margin-top: 7px;
  text-align: center;
  padding-bottom: 10px;
  font-family: "heading", Courier, monospace;
}

aside {
  grid-area: aside;
}

aside > h1 {
  text-align: center;
}

aside > p {
  line-height: 32px;
  padding: 5px;
}

main {
  grid-area: main;
}
main img[alt~=Beth] {
  float: right;
  width: 300px;
  height: auto;
  margin: 0.5em auto;
  border-radius: 50%;
}

.photo {
  grid-area: photo;
}
.photo img[alt~=pawprint] {
  float: left;
  width: 200px;
  height: auto;
  margin: 0.5em;
}

.photo1 {
  grid-area: photo1;
}
.photo1 img[alt~=pawprint] {
  float: right;
  width: 200px;
  height: auto;
  margin: 0.5em;
}

.Cont {
  grid-area: Cont;
  margin-left: 3px;
  margin-bottom: 5px;
}

.values {
  grid-area: values;
  margin-right: 3px;
  margin-bottom: 5px;
}

.yellow {
  background-color: rgb(255, 200, 71);
  margin: 3px;
  padding: 10px;
}

.blue {
  background-color: rgb(0, 160, 199);
  margin: 3px;
  padding: 10px;
}

aside > h1 {
  background-color: rgb(74, 157, 91);
  padding: 10px;
}

div > h3 {
  text-align: center;
}

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

.heading {
  grid-area: heading;
  text-align: center;
  background-color: rgb(74, 157, 91);
}

.Winston {
  grid-area: Winston;
}
.Winston img[alt~=Winston] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: auto;
  margin: 0.5em auto;
}

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

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

div > .AboutCat {
  margin-top: 13%;
}

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;
}

@media only screen and (max-width: 400px) {
  #container1 {
    display: grid;
    grid-template-areas: "nav" "header" "aside" "main" "values" "Cont" "heading" "Winston" "April" "Martock" "footer";
    width: 100%;
  }
  .photo {
    grid-area: photo;
  }
  .photo img[alt~=pawprint] {
    float: left;
    width: 200px;
    height: auto;
    margin: 0.5em;
    display: none;
  }
  .photo1 {
    grid-area: photo1;
  }
  .photo1 img[alt~=pawprint] {
    float: right;
    width: 200px;
    height: auto;
    margin: 0.5em;
    display: none;
  }
  main {
    grid-area: main;
  }
  main img[alt~=Beth] {
    width: 300px;
    height: auto;
    margin: 0.5em auto;
    border-radius: 50%;
    display: block;
  }
}/*# sourceMappingURL=About.css.map */