@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" "section section section section section section aside aside aside aside aside aside" "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: linear-gradient(rgb(255, 200, 71), rgb(74, 157, 91), rgb(0, 160, 199));
  margin-top: 7px;
  text-align: center;
  padding-bottom: 10px;
  font-family: "heading", Courier, monospace;
}
header img[alt~=BlackCat] {
  display: block;
  border-radius: 50%;
  width: 100px;
  height: auto;
  margin: 0.5em auto;
}

section {
  grid-area: section;
  margin: 5px 10px;
  padding: 5px 10px;
}

aside {
  grid-area: aside;
  margin: 5px 10px;
  padding: 5px 10px;
}

section > h2 {
  background-color: rgb(0, 160, 199);
}

aside > h2 {
  background-color: rgb(74, 157, 91);
}

h4:hover {
  background-color: rgb(255, 200, 71);
}

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: 900px) {
  #container1 {
    display: grid;
    grid-template-areas: "nav" "header" "aside" "section" "footer";
    width: 100%;
  }
  footer {
    grid-area: footer;
    background-color: rgb(186, 204, 218);
    padding: 20px;
    text-align: center;
    float: left;
  }
  footer img[alt~=logo] {
    float: right;
    height: 25px;
    width: auto;
  }
  footer img[alt~=Facebook] {
    float: left;
    padding-right: 0.5em;
    height: 25px;
    width: auto;
  }
  footer img[alt~=youtube] {
    float: left;
    height: 25px;
    width: 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: 25px;
    width: auto;
  }
  nav li {
    display: inline;
    list-style-type: none;
    margin-right: 1.5em;
  }
  nav .active {
    background-color: rgb(0, 160, 199);
    padding: 2px;
  }
}/*# sourceMappingURL=articles.css.map */